Add Image Hover Effect (CSS/JQuery ) To Blogger

10:22:00 PM |

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

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.ns-services.co.cc/" ><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.ns-services.co.cc/" class="thumbopacity" ><img  border="0" src=".../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; 
}

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.ns-services.co.cc/" ><img  border="0" src=".../sample.jpg" /></a>

Define a class of class="thumbborder" to your Normal code Then modified code is bellow
<a href="http://www.ns-services.co.cc/" class="thumbborder" ><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.ns-services.co.cc/" ><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.ns-services.co.cc/" class="thumbs" ><img  border="0" src=".../sample.jpg" /></a>