Homespun Web Animations with Roll-over or Click Effects

[Acorn]

This is a development from a simple approach to hovering over a Black & White image so that it turns full colour.
This approach uses just one image and applies a greyscale filter to it that is removed when hovered on.

The Recipe

• One Full Colour Image
• It is given a ClassName in Names: htmlclass="bw"
• It has some CSS on the page (in a Placeholder Head or the Page head):

<style>

[class*="bw"] {
filter: grayscale(100%);
transition: 0.507s ease-in-out;
}

.bw:hover {

filter: grayscale(0%);

}

</style>

• I could have used .bw { ... } rather than [class*="bw"] { ... } but I can develop the CSS code with my choice.
• A hover changes the greyscale to nothing in a transition time that you can alter; ease-in-out is a smoothing control on how the effect fades.

So I want to only apply the effect when I click on the image.

So I clone the image, and:

• Change its ClassName to htmlclass="bw-clk"
• Add another hover selector to make .bw:hover, .bw-click:active { ...
• Change the cursor when over the image to indicate a click is required:

.bw-clk {
cursor: pointer;
}

In my demonstration file, CSS - Hovers & Clicks.xar, the top-most two images show this effect.
The following middle four images use the same simple approach to achieve differing effects.
The 'fade-out' and 'shrink' actually make the top image disappear, leaving another object underneath.

The bottom set can use any of the 50 listed Xara Effects, plus another 70+ (page) effects that Xara cripples to far fewer in its UI:

• Here you can alter the timing and delay to the millisecond.
• You can also set the Effect to repeat any number of time (including infinite) for as long as the image is hovered on click over.

The empty Hourglass is used to invoke the ani.css collection of listed effects.

The CSS Symbol between each pair allows you to copy that effect to your design where you then add the required ClassName(s) to any number of images.

I hope you see the power of what is a fairly simply set of widgets.

Acorn

[Egg Bramhill]

Some good effects there Acorn. Here's my attempt, it changes from B&W to colour slightly then reveals the B&W version below with coloured fruit.

LINK

[Acorn]

Some good effects there Acorn. Here's my attempt, it changes from B&W to colour slightly then reveals the B&W version below with coloured fruit.
LINK

Yes Egg, effective. Your under image is slightly displaced and it has a faint grey box near the top.

Acorn

[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.