Customizing gallery slideshow:reel

I was hoping someone could come up with a code to do the following: make the captions appear on a gallery slideshow: reel images, on hover each image should zoom in, the text should appear and I also want the image to have an overlay effect on hover. If possible, when this is done, I would like the blank space where the captions were to be deleted. I got this code so far: 

/* Common styles for captions */
.gallery-caption {
  margin-top: -80%;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.3s;
}

/* Hover effect to show captions */
.gallery-reel-item:hover .gallery-caption {
  opacity: 1;
  visibility: visible;
}

/* Caption font styles */
.gallery-reel-list p.gallery-caption-content {
  font-size: 3em !important;
  font-family: Poppins;
  font-weight: 450;
}

/* Middle image's caption style */
.gallery-reel-item-middle .gallery-caption {
  opacity: 0;
  visibility: hidden;
}

/* Hover effect for middle image's caption */
.gallery-reel-item-middle:hover .gallery-caption {
  opacity: 1;
  visibility: visible;
}

It has some flaws as I've gotten it from communicating with ChatGPT. (This code works almost as intended, I just would like the middle image of the slideshow to not have text present unless I hover on it and also I'd like the overlay effect and the blank space disappear as I've mentioned). 

I want the section to look something like the section from this website: https://demo.goodlayers.com/arki/minimal/home-the-studio/

my website: https://lettuce-tarpon-hpp4.squarespace.com/

pass: mac123

Thank you in advance!

@tuanphan please help, I'd really appreciate it 🙂

To CSS box

/* reel hover */

.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: 0 !important;
pointer-events: none;
}
.gallery-reel-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-reel-item a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-reel-item:hover a:after {
    opacity: 0.75;
}
.gallery-reel-item img {
    transition: all 0.2s ease;
}
.gallery-reel-item:hover img {
    transform: scale(1.3);
    transition: all 0.2s ease;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figcaption * {
    font-size: 10px !important;
}

Hi @tuanphan!

I am using this code you wrote. It is pretty close to what I am truing to achieve, but I will like to change the font and size of the caption displaying in the middle. As well as making the link open in a new page. Can you help with this? thank you!

On 11/19/2023 at 3:21 AM, LucyBold said:

Hi @tuanphan!

I am using this code you wrote. It is pretty close to what I am truing to achieve, but I will like to change the font and size of the caption displaying in the middle. As well as making the link open in a new page. Can you help with this? thank you!

Can you share link to page where you use reel? We can adjust code easier

Hi @tuanphan
here it is https://www.lacalifornie.es/home-1

I will like to adjust font size and possibly color. Would it be possible to move this caption right above the bullet navigation? 

Thanks so much!

On 11/20/2023 at 3:34 PM, LucyBold said:

Hi @tuanphan
here it is https://www.lacalifornie.es/home-1

I will like to adjust font size and possibly color. Would it be possible to move this caption right above the bullet navigation? 

Thanks so much!

 

In code I sent, edit this code

/* 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: 0 !important;
pointer-events: none;
}

to this

/* 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: 0 !important;
pointer-events: none;
font-size: 40px !important;
color: #f1f !important;
}

Thanks @tuanphan it works, I am getting close!
 
- Can I adjust the style of the font? to bold for example?
- Is it possible to add a second line under the title with a button/CTA for a link?

- Another option is to move the Title right above or to the right of the bullet nav. Is this possible?

 

On 11/22/2023 at 1:37 PM, LucyBold said:

Thanks @tuanphan it works, I am getting close!
 
- Can I adjust the style of the font? to bold for example?
- Is it possible to add a second line under the title with a button/CTA for a link?

- Another option is to move the Title right above or to the right of the bullet nav. Is this possible?

 

#1. You can add font-weight: bold;

/* 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: 0 !important;
pointer-events: none;
font-size: 40px !important;
color: #f1f !important;
font-weight: bold;
}

#2. Can you disable slideshow autoscroll? We can test code easier

#3. You mean move to this?

Since I used the text overlay on the Slideshow Reel Gallery and added captions, it created the dead space under controls location.

How would you minimize the gap between the slideshow reel gallery itself and the navigation (controls location)  button below?

The website is: https://www.internationalheritagefashionweek.com/

The code that I used: 

/* reel hover */

.gallery-caption {
    position: static;
}

/* title */
.gallery-caption-content {
    position: absolute;
    left: 10%;
    top: 92%;
    width: 80%;
    height: auto; /* Adjust the height to fit the content */
    max-width: 60%; /* Set a maximum width for the box */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    font-size: 1.1em !important;
    color: #ffff !important;
    font-weight: bold;
    background-color: rgba(67, 65, 66, 0.7); /* Light grey with some transparency */
    padding: 5px; /* Adjust as needed */
    border-radius: 5px; /* Optional for rounded corners */
}

.gallery-reel-item:hover .gallery-caption-content {
    opacity: 1 !important;
}

/* overlay */
.gallery-reel-item a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-reel-item:hover a:after {
    opacity: 0.75;
}

.gallery-reel-item img {
    transition: all 0.2s ease;
}
.gallery-reel-item:hover img {
    transform: scale(1.3);
    transition: all 0.2s ease;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figcaption * {
    font-size: 10px !important;
    color: #ffff !important;
    font-weight: bold;
}

On 3/3/2024 at 11:13 PM, natali5115 said:

Since I used the text overlay on the Slideshow Reel Gallery and added captions, it created the dead space under controls location.

How would you minimize the gap between the slideshow reel gallery itself and the navigation (controls location)  button below?

The website is: https://www.internationalheritagefashionweek.com/

 

The code that I used: 

/* reel hover */

.gallery-caption {
    position: static;
}

/* title */
.gallery-caption-content {
    position: absolute;
    left: 10%;
    top: 92%;
    width: 80%;
    height: auto; /* Adjust the height to fit the content */
    max-width: 60%; /* Set a maximum width for the box */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    font-size: 1.1em !important;
    color: #ffff !important;
    font-weight: bold;
    background-color: rgba(67, 65, 66, 0.7); /* Light grey with some transparency */
    padding: 5px; /* Adjust as needed */
    border-radius: 5px; /* Optional for rounded corners */
}

.gallery-reel-item:hover .gallery-caption-content {
    opacity: 1 !important;
}

/* overlay */
.gallery-reel-item a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-reel-item:hover a:after {
    opacity: 0.75;
}

.gallery-reel-item img {
    transition: all 0.2s ease;
}
.gallery-reel-item:hover img {
    transform: scale(1.3);
    transition: all 0.2s ease;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
figcaption * {
    font-size: 10px !important;
    color: #ffff !important;
    font-weight: bold;
}

You mean this space?

Hi, 

I would love to know if its possible to reduce this dead space below the 'slideshow: reel' when captions are turned on. 

I have also used the CSS to move the caption up onto the bottom of the image, but there is now plenty of space below where the caption once was

Thanks!

On 6/24/2024 at 5:05 PM, Tlwes said:

Hi, 

I would love to know if its possible to reduce this dead space below the 'slideshow: reel' when captions are turned on. 

I have also used the CSS to move the caption up onto the bottom of the image, but there is now plenty of space below where the caption once was

Thanks!

 

If you share link to page where you use Reel, we can check easier.