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