Streaming live at 10am (PST)

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


#1

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


#3

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.


#4

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


#5
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.


#6

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 smile

Cheers,
Ankit


#7

Check this one.....CSS Image hover effects

Chris


#8