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.

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!