Image Hover Effect using CSS

0 Comments

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  ]]></b:skin>  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:

<a href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a>

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

<a class="hovereffect" href="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s1600-h/hover%20effect%20leaves.jpg"><img border="0" height="240" src="http://2.bp.blogspot.com/_dzq0x75P67s/S2wcsXRwpCI/AAAAAAAABPg/wS4Guv_TcyQ/s320/hover%20effect%20leaves.jpg" width="320" /></a>

Let's have an explanation. To make the images opaque and mouseover effect, definitions .hovereffect and  .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.
Note;This tutorial is not only for Blogger, but can also be used in any blog platform which follows CSS rules, like Wordpress. Feel free to give your feedbacks.