Hover effect on a gallery in 7.1

Hi everybody,

Does anyone know how I can get a gallery hover effect for gallery images that are links in Squarespace 7.1? Almost so the photo fades a little, similar to this website when you hover over the images:

http://marylennox.de/

The page on my website I'd like to apply this to is:

https://denim-khaki-tp4d.squarespace.com/gallery-test-2

Many thanks,

Lauren

Hi @laurenruth1,

This should get you close. You can play around with the opacity value to make it more or less opaque:

.gallery-grid-item-wrapper:hover img {
  opacity: 0.3;
}

@christyprice that works great! thanks so much 🙂 

Thanks for letting me know @laurenruth1. If you could "vote up" the answer on the left, that will let others know it's a valid solution.

On 4/8/2020 at 12:58 PM, christyprice said:

Hi @laurenruth1,

This should get you close. You can play around with the opacity value to make it more or less opaque:

.gallery-grid-item-wrapper:hover img {
  opacity: 0.3;
}

 

Hi,

Do you know of a way to have text appear on a hover over in gallery blocks in 7.1? I just want to be able to display the name of the person in each photo in the gallery.

Thanks!

8 hours ago, WillH said:

Hi,

Do you know of a way to have text appear on a hover over in gallery blocks in 7.1? I just want to be able to display the name of the person in each photo in the gallery.

Thanks!

Try 

13 hours ago, tuanphan said:

Try 

 

Thanks very much for this. It seems to be working for the most part, but is there a way for the text to only display on hover over? I have read through the original thread but havent seen anything about this.

Its also showing the image extension (.jpeg) as well. I have tried removing the ext in the file name but it still appears. Any way around this?

Thank you!

23 hours ago, WillH said:

Thanks very much for this. It seems to be working for the most part, but is there a way for the text to only display on hover over? I have read through the original thread but havent seen anything about this.

Its also showing the image extension (.jpeg) as well. I have tried removing the ext in the file name but it still appears. Any way around this?

Thank you!

Add to Home > Design > Custom CSS

.gallery-item-description {
    opacity: 0;
    transition: all ease-in-out 0.5s;
}
.gallery-item-description:hover {
    opacity: 1;
}

On 4/8/2020 at 10:58 AM, christyprice said:

Hi @laurenruth1,

This should get you close. You can play around with the opacity value to make it more or less opaque:

.gallery-grid-item-wrapper:hover img {
  opacity: 0.3;
}

 

This worked nicely for me. Would you also have code to make the transition smoother between hover/non-hover? Something more like how the hover acts in the nav bar with the main CTA on the right (still in progress but a good example of the hover behavior I am seeking if possible!)

https://saffron-lychee-ydn6.squarespace.com/ron-rakow

PW: retro

It's not terrible as is but I'd love to refine it. It's the gallery under "EXPLORE MORE OF OUR ROSTER"

Thank you!

On 4/21/2022 at 11:07 AM, wonderpiece said:

This worked nicely for me. Would you also have code to make the transition smoother between hover/non-hover? Something more like how the hover acts in the nav bar with the main CTA on the right (still in progress but a good example of the hover behavior I am seeking if possible!)

https://saffron-lychee-ydn6.squarespace.com/ron-rakow

PW: retro

It's not terrible as is but I'd love to refine it. It's the gallery under "EXPLORE MORE OF OUR ROSTER"

Thank you!

Remove above code & use this new code

figure.gallery-grid-item .gallery-grid-image-link:after {
    content: "";
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    transition: all 0.2s ease;
}
figure.gallery-grid-item:hover .gallery-grid-image-link:after {
    opacity: 1;
    transition: all 0.2s ease;
}

As always, huge thanks @tuanphan. Worked nicely.