Hover effect on a gallery in 7.1

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