Jump to content

Customizing gallery slideshow:reel

Recommended Posts

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!

Link to comment
  • Replies 10
  • Views 3.6k
  • Created
  • Last Reply

Top Posters In This Topic

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.thumb.png.c032f4069ce4a0c505f9ed882e108442.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

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;
}

Link to comment
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?

image.png.c0bab88df877f2ce3bcc8fbec6ba5b66.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.