Homespun Web Animations with Roll-over or Click Effects

[gwpriester]

I used that effect for decades on the local site I hosted for artists here in Placitas. But of course I had to use two images, grayscale with color on the mouse over layer. This is a much better solution.

The site is coming down soon and I no longer host the site but here is one example: http://placitasartists.com/gallery_09.html

On the home page I use a similar effect. The images are in color but the saturation is cranked back. On mouse over the color goes back to full saturation. Is this possible with this CSS approach?

[Acorn]

I used that effect for decades on the local site I hosted for artists here in Placitas. But of course I had to use two images, grayscale with color on the mouse over layer. This is a much better solution.
The site is coming down soon and I no longer host the site but here is one example: http://placitasartists.com/gallery_09.html
On the home page I use a similar effect. The images are in color but the saturation is cranked back. On mouse over the color goes back to full saturation. Is this possible with this CSS approach?

Gary, very easily.

Instead of filter: grayscale(100%);, change it to filter: grayscale(65%);.

You can also crank up the .bw:hover state by altering the filter: grayscale(0%) contrast(125%) saturate(150%);.

To do the approach justice, have a play with https://css-tricks.com/almanac/properties/f/filter/.

If you need to apply something you like, I'm there to advise.

Acorn

[gwpriester]

If you need to apply something you like, I'm there to advise.

I appreciate that. But, I am completely out of the web design business. I turned over the last of my sites to a colleague. It's a relief to tell the truth.

[Initiostar]

Gary, very easily.

Instead of filter: grayscale(100%);, change it to filter: grayscale(65%);.

You can also crank up the .bw:hover state by altering the filter: grayscale(0%) contrast(125%) saturate(150%);.

To do the approach justice, have a play with https://css-tricks.com/almanac/properties/f/filter/.

If you need to apply something you like, I'm there to advise.

Acorn

Interesting ideas Acorn - had a play using the sepia and contrast filters, added a standard Xara animation, and a link from the photo to its website. The result is posted to an old demo for hovers:

https://initiostar.co.uk/demo/hoverZoom/

Thanks for the concepts.