Change image tone when cursor hovers it

JDGS

Hi,

Is it possible, using CSS, to change an image to a lighter tone when the cursor hovers it?
I want this feature for this page: https://danielsantosphoto.com/Galleries

Thank you so much,
Daniel Santos

Hikin' Mike

Add this to your Theme's Custom CSS section:

/* Lightens Image on Hover */
.sm-user-ui .sm-page-node-vsVqj3 .sm-tile-photo a {transition: opacity ease-out 250ms;}
.sm-user-ui .sm-page-node-vsVqj3 .sm-tile-photo a:hover {opacity: .8;}

Change the opacity: .8; to suit. Opacity from 100% visible (1) to transparent (0). I added a transition as well.

JDGS

It looks really cool. If i wanted to add this effect to all the images of the site with a link, what should I do?

Hikin' Mike

@JDGS said:
It looks really cool. If i wanted to add this effect to all the images of the site with a link, what should I do?

Just remove this: .sm-page-node-vsVqj3.

JDGS

@Hikin' Mike said:

@JDGS said:
It looks really cool. If i wanted to add this effect to all the images of the site with a link, what should I do?

Just remove this: .sm-page-node-vsVqj3.

Perfect. Thank you so much