Gallery Slideshow Reel: Overlay description text on the image

Site URL: https://aria.squarespace.com/

Hi, 

Using version 7.1. 

I would like to overlay my description on the image but can't seem to find the code. 

Thanks in advance for the input.

The description is below the image: 

What I am trying to achieve: 

What is access password?

Add to Home > Design > Custom CSS

figure.gallery-reel-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 1 !important;
pointer-events: none;
color: #fff;
}

Hi @tuanphan

I am trying to achieve a similar concept to ysong. I've got a Reel Gallery, where I want the caption to appear on hover, with a clickthrough to another page, and the arrows beneath the gallery. I have managed to achieve almost all of the above - except that when the gallery arrows are located "Below Center", and captions are on, there is a huge blank space beneath the gallery, where the captions go. Even with my CSS that places the caption on top of the image, that spacing does not disappear. I've looked all over the forums for some CSS that will solve this, but I've had no luck. 

This is the issue before I add any CSS. So this is the 'standard' situation for Reels + Captions + arrows Below Center:



This is what is looks like now that I've edited the arrows and the captions with CSS:



It seems that this issue only appears when the arrows are placed "Below Center" - it's not an issue when the arrows are on the sides. However, I really want the arrows to be centred beneath the image (as seen in the image above).

Website link is https://www.lipsticklens.com/ (it's near the top of the homepage).  

Existing CSS looks like this:

/*HOMEPAGE - SLIDESHOW */

/*remove arrow background*/
.gallery-reel-control-btn::before{
  background-color:#3E1821;}

/*change arrow colour*/
.gallery-reel-control-btn {
  color:#D0A658;}

/*change caption placement + hover*/
.gallery-caption {
  margin-top: -22%;
  opacity:0!important; 
  transition-duration:0.3s}

/*hover effect*/
.gallery-reel-item:hover .gallery-caption {
  opacity:1!important; 
  transition-duration:0.3s}

/*caption font*/
.gallery-reel-list p.gallery-caption-content {
    font-size: 3em !important;
    font-family: Goldenbook;}

I found this code in one of your other forum answers, but unfortunately it does not help - in fact, the arrows just end up overflowing/floating down into the section below:

.homepage .gallery-reel[data-show-captions="true"][data-width="full-bleed"] {
    margin-bottom: 0px !important;
}

I hope you can help @tuanphan! This is my first time asking a question, as normally I've been able to find everything I need to know through your incredibly helpful forum answers. You're an absolute star!! 🤩

On 3/17/2021 at 6:49 PM, AmalieHoffding said:

Hi @tuanphan

I am trying to achieve a similar concept to ysong. I've got a Reel Gallery, where I want the caption to appear on hover, with a clickthrough to another page, and the arrows beneath the gallery. I have managed to achieve almost all of the above - except that when the gallery arrows are located "Below Center", and captions are on, there is a huge blank space beneath the gallery, where the captions go. Even with my CSS that places the caption on top of the image, that spacing does not disappear. I've looked all over the forums for some CSS that will solve this, but I've had no luck. 

This is the issue before I add any CSS. So this is the 'standard' situation for Reels + Captions + arrows Below Center:



This is what is looks like now that I've edited the arrows and the captions with CSS:



It seems that this issue only appears when the arrows are placed "Below Center" - it's not an issue when the arrows are on the sides. However, I really want the arrows to be centred beneath the image (as seen in the image above).

Website link is https://www.lipsticklens.com/ (it's near the top of the homepage).  

Existing CSS looks like this:

/*HOMEPAGE - SLIDESHOW */

/*remove arrow background*/
.gallery-reel-control-btn::before{
  background-color:#3E1821;}

/*change arrow colour*/
.gallery-reel-control-btn {
  color:#D0A658;}

/*change caption placement + hover*/
.gallery-caption {
  margin-top: -22%;
  opacity:0!important; 
  transition-duration:0.3s}

/*hover effect*/
.gallery-reel-item:hover .gallery-caption {
  opacity:1!important; 
  transition-duration:0.3s}

/*caption font*/
.gallery-reel-list p.gallery-caption-content {
    font-size: 3em !important;
    font-family: Goldenbook;}

I found this code in one of your other forum answers, but unfortunately it does not help - in fact, the arrows just end up overflowing/floating down into the section below:

.homepage .gallery-reel[data-show-captions="true"][data-width="full-bleed"] {
    margin-bottom: 0px !important;
}

I hope you can help @tuanphan! This is my first time asking a question, as normally I've been able to find everything I need to know through your incredibly helpful forum answers. You're an absolute star!! 🤩

Hey. Sorry for the delay. Do you still need help?

On 10/26/2021 at 6:35 AM, MoonMama said:

Hi @tuanphan

I also have a similar request to ysong and amalie. I am using Masonry Gallery where I want the caption to disappear on hover like on the Flatiron template. 

It is on a hidden page called landing on my site https://www.tribeandsol.com this is how it looks without the css above.

 

When I insert the code you gave ysong it puts the text on the image but creates blank space where the text used to be I don't want any spaces. (I'd like the text to match my sites default text) (the size of the text also needs to be bigger) 

I figured out how to get the gallery like the Flatiron template but nothing else is the same and I have been trying for days. I hope you can help! Thanks 

Can you share link to page in screenshot? I will try test why blank space appear

On 10/28/2021 at 10:09 PM, MoonMama said:

https://tribeandsol.squarespace.com/landing

Hi. The url doesn't exist. Can you check it again?

I would like to know how to tighten up that space below the reel gallery when a caption is used as asked in the original question.

Hi @tuanphan

Your post was really helpful for the text overlay on an image gallery. But I have a problem with texts that are too long, on the image the text displayed should be FIBRAS  VEGETALES, but it appears all in the same line. Can the words be in two different lines?

On 2/22/2022 at 10:57 AM, elviadelrio said:

Hi @tuanphan

Your post was really helpful for the text overlay on an image gallery. But I have a problem with texts that are too long, on the image the text displayed should be FIBRAS  VEGETALES, but it appears all in the same line. Can the words be in two different lines?

 

Can you share link to page in screenshot? We can add code to reduce text size

On 11/11/2021 at 5:40 PM, kakers said:

I would like to know how to tighten up that space below the reel gallery when a caption is used as asked in the original question.

I'm keen to know how to tighten up that space below too - any suggestions? TIA

On 10/5/2023 at 6:41 PM, MakingWaves said:

I'm keen to know how to tighten up that space below too - any suggestions? TIA

If you share link to page where you have problem, we can help easier

Hi,

I have the same issue as above. I am trying to reduce the space under the photo where the captions would be without CSS and also trying to put a small green box behind the caption text. 

On 10/25/2023 at 9:28 PM, SVWeb said:

Hi,

I have the same issue as above. I am trying to reduce the space under the photo where the captions would be without CSS and also trying to put a small green box behind the caption text. 

If you share link to page where you use gallery slideshow, we can check easier

Hi, I'm also looking for some help with this!

I have a slide show reel that will show multiple images on reel, I'd like to add the description to each image. 

If possible I'd also like to add spacing between the images so that they're more distinct - if it's not possible I'll add it to the images manually.

I'm not committed to an exact style, but this is roughly the effect I'm trying to create. 

Hope you can help, the password to the site is ASHS

https://olive-rhombus-8z34.squarespace.com/

On 2/14/2024 at 10:09 PM, jjjcb said:

Hi, I'm also looking for some help with this!

 

I have a slide show reel that will show multiple images on reel, I'd like to add the description to each image. 

 

If possible I'd also like to add spacing between the images so that they're more distinct - if it's not possible I'll add it to the images manually.

 

I'm not committed to an exact style, but this is roughly the effect I'm trying to create. 

Hope you can help, the password to the site is ASHS

https://olive-rhombus-8z34.squarespace.com/

 

 

 

You can edit Gallery > Enable Caption > Next edit each image > Add text in Description box > Text will appear under Reel > When you've done this, we can give the code to move text over image

On 2/16/2024 at 1:05 PM, tuanphan said:

You can edit Gallery > Enable Caption > Next edit each image > Add text in Description box > Text will appear under Reel > When you've done this, we can give the code to move text over image

Done this!

I see you used some code to reduce reel height, this will make text overflow

You can use this code to Website > Website Tools > Custom CSS to add text overlay image

body.homepage {
figcaption.gallery-caption.gallery-caption-reel {
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    height: auto !important;
    transform: translate(-50%,-50%);
    margin: 0 !important;
}

.gallery-reel {
    padding: unset !important;
}

}

1 hour ago, tuanphan said:

I see you used some code to reduce reel height, this will make text overflow

You can use this code to Website > Website Tools > Custom CSS to add text overlay image

body.homepage {
figcaption.gallery-caption.gallery-caption-reel {
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    height: auto !important;
    transform: translate(-50%,-50%);
    margin: 0 !important;
}

.gallery-reel {
    padding: unset !important;
}

}

Thanks for your repsonse, I don't have any code to change the height of the gallery - it's just set to be small in the section settings. 

I have the captions on the images now - thank you! Now how do I remove the blank space beneath the gallery?

I've made a couple of adjustments to the slideshow using some of your tutorials on other posts, but I'm still trying to remove the blank space beneath the gallery. 

I've pasted all the code on the gallery below. This is one of the only pieces of CSS I have on my site as so far i've kept it pretty simple!

Is the code I've used here limited to this gallery/the homepage? Or will I have to be careful now if i use slideshow reels anywhere else on the site?

Thanks for all your help so far - I've found your tutorials really useful for building my first website.

//HOMEPAGE TIMBER GALLERY    
    //Moving captions onto images
body.homepage {
figcaption.gallery-caption.gallery-caption-reel {
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 90% !important;
    left: 55% !important;
    height: auto !important;
    transform: translate(-50%,-50%);
    margin: 0 !important;
}
}
    //Changing caption font
.gallery-reel-list p.gallery-caption-content {
    font-size: 1.5em !important;
      color: #372601;
}
    //Padding between timber samples
.gallery-reel-item img {left: 20px !important;}

.gallery-reel-item { 
  background-color: #fcf6f0; 
}