How to Add Image Hover Effect (CSS/jQuery ) to Blogger / Blogspot

Hi Friends! Now you can add Image hover effect to images in blogger very easily.

This trick allows your images to some transparency (Not all Images only specified images). when your mouse over on image it will turn to no transparent will make hover effect.

I am giving three types of image hover effects

1. CSS Opacity Effect
2. CSS Border Effect
3. jQuery Fading Effect

Watch Live Demo here

How to Add Image Hover Effect to Blogger?

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; 
   }

5. Save your template.

Now turn your Image links to hover effect.

Your Normal code to create link with image like bellow

<a href="/index.html" ><img  border="0" src="/2010/07//sample.jpg" /></a>

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

<a href="/index.html" class="thumbopacity" ><img  border="0" src="/2010/07//sample.jpg" /></a>

CSS Border 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

   .thumbborder img{
       border: 2px solid #ccc;
   }
   .thumbborder:hover img{
       border: 2px solid navy;
   }
   .thumbborder:hover{
       border-color: red; 
   }

5. Save your template.

Now turn your Image links to hover effect.

Your Normal code to create link with image like bellow

<a href="/index.html" ><img  border="0" src="/2010/07//sample.jpg" /></a>

Define a class of class=”thumbborder” to your Normal code Then modified code is bellow

<a href="/index.html" class="thumbborder" ><img  border="0" src="/2010/07//sample.jpg" /></a>

jQuery Fading Effect

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

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

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

   b.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>

5. Save your template.

Now turn your Image links to hover effect.

Your Normal code to create link with image like bellow

<a href="/index.html" ><img  border="0" src="/2010/07//sample.jpg" /></a>

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

<a href="/index.html" class="thumbs" ><img  border="0" src="/2010/07//sample.jpg" /></a>

Leave your Comments