Streaming live at 10am (PST)

How to have all images darken on hover

#1

Hello,

Currently I have a bunch of images displayed in a grid-like pattern. I have gotten the third row, first column image, the watch, to darken when hovered over. I did this by placing a black div block behind the image and when the image is hovered over the opacity is changed to 70%. What my problem is however, is how do I make it so all the images do the same thing? Thanks

https://preview.webflow.com/preview/test-179af8?utm_source=test-179af8&preview=639e76008cff0290471f7fab47c5af7a

1 Like
#2

Hello @Sneakers12

The best way is to use interactions with a class targeting.

@Sneakers12 Here’s a screen record where you can see > https://www.useloom.com/share/54898d416d984c77b9b105e10372f713

Piter :webflow_heart:

2 Likes
#3

Thank you, that was very helpful, is there a way to have the image darken without having the text and bookmark darken as well?

1 Like
#4

Yes, from what I see the text is set to position relative. Just increase the text and bookmark z-index so they can be above the image overlay.

1 Like
#5

If the text and bookmark z-index is above the image overlay, when the curser hovers above those elements won’t the image un-darken?