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