Streaming live at 10am (PST)

How to have all images darken on hover


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

1 Like

Hello @Sneakers12

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

@Sneakers12 Here’s a screen record where you can see >

Piter :webflow_heart:


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

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

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?