How to Give image Hover Effect using CSS ?

Today I am going to tell you how to change opacity (transparency) of the image and add image hover effect using CSS3 in Blogger.
See an example:

You will find that whenever you place your mouse pointer over the image, it will hover with full transparency and with some transition effect. Interesting! Now let us start with a small tutorial.

To add hover effect in your Blogger template, go to Design > Edit Html tab and backup your template first.

Now find ]]> and just before it add the following styling codes:

.hovereffect img {
opacity:0.5;
filter:alpha(opacity=50);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.hovereffect:hover img {
opacity:1.0;
filter:alpha(opacity=100);
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}

Save your template.

To use this effect you have to add class="hovereffect" to your images. For example, when you add an image, it generally looks like:

class="hovereffect"href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg">

But, to add the hover effect, you need to add the class as shown below:

Let's have an explanation. To make the images opaque and mouseover effect, definitions .hovereffectand .hovereffect: hover are added while property codes like opacity, filter: alpha, -moz-opacity and -khtml-opacity are used.

Property “opacity” is used for the browsers which supports CSS3 standard (most of the modern browsers do).
While “filter: alpha” is for Internet Explorer,
“-moz-opacity” is for Firefox, “-khtml-opacity” is for Safari and Chrome are used for backward compatibilities.

Transition effects are also added so that while hovering and changing effects, it makes a delay. It's totally new CSS3 property.

“0.5” and “1.0” are used to tell the browsers the quantity of the opacity. You can change this.

This tutorial is not only for Blogger, but can also be used in any blog platform which follows CSS rules, like Wordpress.