Jump to content

Need help with Image Gallery Hover Animation CSS

Recommended Posts

For each of these image blocks i want the following to happen:

1. When i hover my cursor over each image i want the caption to appear in the middle of the image and disappear when my cursor moves off the image

 2. When i hover my cursor over each image i want the opacity to change so i can see the text more clearly; ideally the image to go darker and the text will be white 

3. This to happen on all images not just the middle image

4. Anyway we can stop the flash when the images reach the end of the cycle


CSS code so far:

 

/* reel hover */

.gallery-caption {
    opacity: 0;
    transition: opacity 200ms ease;
}

.gallery-caption:hover {
    opacity: 1;
}

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

/* Show the caption only when hovering over the reel item */
.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.1);
    transition: all 0.2s ease;
}

/* remove gap */
figcaption {
    padding: 0 !important;
}

figcaption * {
    font-size: 45px !important;
}

Link to comment
  • Replies 1
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.