Streaming live at 10am (PST)

CSS Image filters within Wordpress - client wants black and white images to colour on hover

Hi there,

I I wonder what the best way to create images that colourise themselves on a hover is? I have a client with a VERY image heavy site that wants the images to colourise when hovered - (dated I know, but his wishes). The only thing is that I dont want to load 2 of each image and do an image swap.

Whats the best way to do this? There is a css webkit function - but I wonder if webflow knows better?

Cheers,
Sam

um… not sure if you found the answer on your own, but you can add CSS code in the head tag in the custom code area of your site’s settings.

Can you show us the result later on if it works? Last time I tried to use the desaturate CSS filter, I found that it wasn’t well supported outside… IE :smiley:

img.desaturate{
    -webkit-filter: grayscale(1); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
    filter: gray; filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    }

This should do the trick.

1 Like

Hi Sam,

I just wrote a blog Post which discusses about GrayScale Hover Effects in wordpress…

Here is the link : http://spoontalk.com/wordpress/add-grayscale-hover-effects-images-wordpress/

Let me know if you have any questions :slight_smile:

Cheers,
Ankit

Check this one…CSS Image hover effects

Chris