Tuesday, 7 May 2013

How to Make Any Image Into Black and White, Then Fade to Colour on Hover



The following code will turn any image to black and white (Greyscale) and then fade to colour on hover. You can see it in action at the bottom of my sidebar, the image which states "Proud to be an Aussie Blogger".

The first part of the code (the CSS) is what will make the effect work. The second part of the code (The HTML), is the image and "calling" the effect to the image.

The CSS:

.colourin {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscalerayscale");
filter: gray;
-webkit-filter: grayscale(100%);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.colourin:hover {
filter: none;
-webkit-filter: grayscale(0%);
}

The good thing about this CSS is there is no need to edit any of the code.
Now, to apply your code go to:

Template →
Customise →
Advanced→
Add CSS

In the space provided, paste the code. Then click the "Apply to Blog" button.

The HTML:

<center><div class="colourin"><a href="URL OF WEBSITE TO GO TO WHEN IMAGE IS CLICKED" title="" target="_blank"><img src="IMAGE URL" alt="NAME OF IMAGE" style="border: none" width="140"/></a></div></center>


How to Tweak the HTML

URL OF WEBSITE TO GO TO WHEN IMAGE IS CLICKED this is the URL of the external site you would like the image linked to so that when the image is clicked, the viewer goes to this website.

IMAGE URL is the URL (location) of the image. To get an image URL, right click on the image and click "copy image URL"

NAME OF IMAGE simply the image name

border: none this can be replaced with a border width, e.g 4px. An image style e.g. solid (can be either solid, dotted, dashed, ridge, outset, inset, grove or double. And finally a border colour (this can be either a word i.e. pink. Or a hex colour code, click HERE for more information regarding Hex Colour Codes.

A complete example of this would be as follows: "border: 6px groove #898989" or "border: 4px double blue".

width="140" is the width your image will appear on your site, this will re-size an image to the size you specify in pixels. It will automatically re-size the height of the image also, to match the width and keep the aspect ratio of the original image.




Once the code is edited to suit your needs, it can be used as a new Java/HTML Gadget/Widget.

That's it folks! If you have any questions, please comment below.

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me