How to Add Image Hover Effect in Blog

The most commonly used image hover effects are

1. CSS Opacity Effect
2. jQuery Fading Effect

Let me explain this with a example

CSS Opacity effect

JQuery Fading effect

CSS opacity Effect

1. Login to Blogger Dashboard
2. Go to Design And select Edit HTML tab
3. And Search ]]</b:skin> tag
4. Add bellow CSS code just before it

a.thumbopacity img {
 filter:alpha(opacity=50);
 -moz-opacity: 0.5;
 opacity: 0.5;
 -khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
 filter:alpha(opacity=100);
 -moz-opacity: 1.0;
 opacity: 1.0;
 -khtml-opacity: 1.0; 
}

Now Save your template.
Now turn your Image links to hover effect.
Your Normal code to create link with image like bellow

<a href="http://www.gwarez.blogspot.com/" > <img  border="0" src= 

".../sample.jpg" /></a>

Define a class of class="thumbopacity" to your Normal code Then modified code is bellow

<a href="http://www.gwarez.blogspot.com/" class="thumbopacity" ><img  border="0" 

src=".../sample.jpg" /></a>

jQuery Fading Effect

1. Login to Blogger Dashboard
2. Go to Design And select Edit HTML tab
3. And Search </head> tag
4. Add bellow JavaScripts just before it

1.Add jQuery script bellow (Skip this step if you already having jQuery script)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'></script>

2.Add this JavaScript before </head> tag

<script type="text/javascript"> $(document).ready(function() { $(".thumbs img").fadeTo("slow", 0.6); $(".thumbs img").hover(function() { $(this).fadeTo("slow", 1.0); }, function() { $(this).fadeTo("slow", 0.6); }); }); </script>

Now Save your template.
Now turn your Image links to hover effect.
Your Normal code to create link with image like bellow

<a href="http://www.gwarez.blogspot.com/" ><img border="0" src=".../sample.jpg" /></a>

Define a class of class="thumbs" to your Normal code Then modified code is bellow

<a href="http://www.gwarez.blogspot.com/" class="thumbs" ><img border="0" src=".../sample.jpg" /></a>