Add Cool Mouse-Over Effect On Blogger Images

Image plays an important role in getting more page views and traffic for your blog. Adding an cool effect to images is awesome. Today I am going to share Cool Mouse-over Effect on Blogger images. And this effect was done with simple CSS.

Images play important role in getting more page views and traffic. Adding an cool effect to images is awesome. Today I am going to share Cool Mouse-over Effect on Blogger images. And this effect was done with simple CSS.     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 !

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

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.