Simple black and white image hover effects CSS for blogger

Add a simple black and white hover effect to any of your images in your blogger blog this simple hover effect makes your image from original color converted into a black and white and when you point your mouse on it it will back on the original color of your image.

                                            

Implementation Guide

• Login to your blogger dashboard and go to your template


• Copy the CSS code and add in your template before the]]></b:skin> (Don't forget to Backup your template)


• After you paste it, go ahead and save it.

//====bedo=Hover effects====//
#bedo a {
text-align: center;
display: block;
color: #888;
font-size: 11px;
}
#bedo a:hover {
text-decoration: none;
color: #222;
}

#bedo img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
opacity:0.6;
filter:alpha(opacity=60);
}
#bedo img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
opacity:1.0;
filter:alpha(opacity=100);
}
//====bedo=Hover effects====//

Now let's move on the next one is your image.

• To be able to make this effect work for your image just add  <dev id="bedo">


• For example, you want to a 300x250 image on your sidebar, then go to your blogger dashboard > Layout > Add a Gadget > HTML and JAVA SCRIPT and paste the code below.

<div id="bedo">

<img src="Image Link Here" height="250" width="300"/></div>

• Change the Image Link Here of  the image you want to add Black and white hover effects.


• Change the 250 and 300 of the images. For example, you want to use it on a 468x60 banner the change the value.

Conclusion

This black and white image hover effects can help you to make a different image effects on the image on your blog so if I were you go ahead and follow this one.