How to Add Multi Hover Effects on Images Using CSS

Recently, I was exploring the effects of CSS until I've  made a different hover effects to images in Blogger post.  Today I'm going to show you a different trick using CSS but with another version to make it more professional in looks. The trick is all about  "how to add an amazing mouseover effect for Blogger images using only CSS", wherein if a mouse will  hover an image from different directions (from above, below, left or right ) will result  an overlay transitioned .Another feature of this trick is it also allows you to add  a texts that would go through your mouse hover.

apply hover effects on images
Live Demo


How to Add Multi Hover Effects on Images Using CSS


Check Also:
How to use the new Blogger Template HTML Editor
Step 1. Go to  Blogger Dashboard >>Template ( have a back-up of your template)
Step 2. Edit HTML button
Step 3. Search for the tag  below
</head>
Step 4. After you have found it, place the set of code below  just above it:
<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>

Step 5. Save the Template

Whenever you want that this trick will work on your images just follow the steps below:
Step 1. Choose a Posts or create a New Post, switch it on the HTML  mode and paste the code below inside the empty box:
Important! Do not click on the Compose mode, otherwise the span tag will be lost.
<div class=multi-hover>
  <span>hover right</span>
  <span>hover top</span>
  <span>hover left</span>
  <span>hover bottom</span>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNbGyqOotTf4HpAievjVCJTMEMRV-2Z0D81Tj0u09pmMfsIeX_hQMazVIVfdTRnxgviniOS9Jwzo5ruFoVsH80XB7VCBB5SfMTLBxyppphLOjRu4FmpeBkO5OD02PijaQLHPLx1oss-mn/s1600/lights.jpg">
</div>

Add your own text/description to "hover right", "hover top", "hover left" and "hover bottom" and replace the url in red with the image URL (3) where you want to apply the effect.

Check also:
How To Upload Images In Blogger And Get The Image Link
Step 2. After you finished editing your post, you may now Publish or Update it.
Thanks for reading this post and I hope that in some other ways this could help your blog in driving more traffic.
I would like to share the credits to helplogger  for providing the initial codes.

Have A Blissfull Blogging Day!


About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...