Multi Hover Lawsuit On Blogger Images Using Pure Css

Today I'm going to demonstrate y'all how to add together an amazing mouseover number for Blogger images using exclusively CSS, inward which moving your mouse over an icon from dissimilar directions (from above, from below, etc) volition drive an overlay transitioned inward from the same vector. This play a joke on volition alter non exclusively the images appearance when moving mouse over them, but volition besides permit y'all to add together within a text amongst a description.

You tin come across the number on this icon below: endeavour moving your mouse from the left, right, in addition to above.

hover right hover top hover left hover bottom

Adding Hover Effect From Different Directions on Blogger Images

First affair to exercise is to add together the CSS means to our Template:

Step 1. From Blogger Dashboard, larn to Template in addition to press the Edit HTML button

Step 2. Search for the </head> tag - to uncovering it, click anywhere within the code area, press CTRL + F keys in addition to type it inward the search box.

Step 3. After y'all flora it, add together the next means only higher upwards it: 

<style>
  /* The container in addition to the icon */
  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, yesteryear default, are hidden */
  div.multi-hover bridge {
    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 volition generate the number */
  div.multi-hover span:nth-child(1) { /* correct */
    background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
    left: 90%;
    top: 0;
  }
  div.multi-hover span:nth-child(2) { /* operate yesteryear */
    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 4. Save the Template

Now nosotros are going to add together the HTML that is cipher but a DIV where nosotros included iv SPAN tags amongst texts in addition to an image:

Step 5. Choose Posts, exercise a New Post, click on the HTML tab (1) in addition to glue this code within the empty box:

<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/AVvXsEh1dTEFt_7e1etIJtRClMbm1c-BGq5qULPaXiIiTnV-Ti-2NKoW-Skf9wpF5ch2EsbXeMiuj8Ov5o9vlEqJk_5iSymAPyqxx2l5K83hQGtehVSblazmBdcBMuvet2xS_E_ZVdgavxdNYY0/s1600/flowers">
</div>

Add your ain text/description to "hover right", "hover top", "hover left" in addition to "hover bottom" (2) in addition to supersede the url inward bluish amongst the icon URL (3) where y'all desire to apply the effect.
Important! Do non click on the Compose tab, otherwise the changes volition endure lost.

Step 6. After y'all finished editing your post, click Publish (4)

And that's it... enjoy! :)