By : 
With this effect while you bring the mouse over an image from above, below, and in all the side you’ll get an overlay transitioned in from the colorful slides. In that slide space you can add your image description. And this effect was first used by Helplogger. Let’s see how to add Cool Mouse-over effect on Blogger Images. You can see the demo image.
Add Cool Mouse-over Effect on Blogger Images
Adding CSS:
- Go to Blogger Dashboard
- Then hit “Template” and click “Edit HTML”
- Now search for code given bellow. For finding that code you can use CTRL+F
</head>
- Once you finshed searching it paste the following code given bellow right above </head>
<style>
/* The container and the image */
div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}
/* The texts that, by default, are hidden */
div.multi-hover span {
color: #FFF;
font-size: 32px;
font-weight: bold;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: all 0.3s linear 0s;
width: 100%;
}
/* And this is what will generate the effect */
div.multi-hover span:nth-child(1) { /* right */
background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* top */
background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* left */
background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* bottom */
background: none repeat scroll 0 0 rgba(97, 181, 115, 0.6);
left: 0;
top: 80%;
}
div.multi-hover span:hover {opacity: 1;}
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
div.multi-hover span:nth-child(2n):hover {top: 0;}
</style>
- Now save your template.
- Adding CSS to your template is completed.
Adding HTML :
Once you finished adding CSS you want to add HTML for your template. You can add this effect only for particular images. In other words you need to add the HTML script for that image. Now in this we’re going to add HTML for one image. Let’s see how.
- Go to create a “New Post” tab.
- Then in that section click on the “HTML” tab
- Then paste the code given bellow in it
<div class=multi-hover>
<span>hover right</span>
<span>hover top</span>
<span>hover left</span>
<span>hover bottom</span>
<img src=”http://4.bp.blogspot.com/-iNaV2hPrI7Y/UaNY2q0ETiI/AAAAAAAADio/TjGwDktvlPQ/s1600/flowers”>
</div>
Some Tweaks and Instruction:
- Replace hover right, hover top, hover left, hover bottom with your dexcription or text.
- Replace the URL with your Image URL
- Once you Finished customizing it publish your image.
- That’s it!
Need Any Help ?
This is the easiest method for adding mouse-hover effect on Blogger images. I simply hope I did justice with the post by creating it as simple as attainable. If you’re facing confusion in any half simply feel assured to depart your comment within the comment box below and I will be at your service 24/7. Share your thoughts in comments !
Script source : Helplogger
