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!
