Multi Hover Number On Blogger Images Using Pure Css

Today I'm going to present you lot how to add together an amazing mouseover resultant for Blogger images using exclusively CSS, inwards which moving your mouse over an picture from dissimilar directions (from above, from below, etc) volition drive an overlay transitioned inwards from the same vector. This fox volition modify non exclusively the images appearance when moving mouse over them, but volition too let you lot to add together within a text amongst a description.

m going to present you lot how to add together an amazing mouseover resultant for Blogger images using exclusively C Multi Hover Effect On Blogger Images Using Pure CSS

You tin come across the resultant on this picture below: endeavour moving your mouse from the left, right, together with 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 agency to our Template:

Step 1. From Blogger Dashboard, become to Template together with press the Edit HTML button

Step 2. Search for the </head> tag - to honor it, click anywhere within the code area, press CTRL + F keys together with type it inwards the search box.

Step 3. After you lot institute it, add together the next agency simply higher upward it:

<style>
/* The container together with the picture */
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, past times 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 resultant */
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) { /* run past times */
    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 aught but a DIV where nosotros included 4 SPAN tags amongst texts together with an image:

Step 5. Choose Posts, exercise a New Post, click on the HTML tab (1) together with 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/AVvXsEjaWj-Mg51zK8tpxfkN7h_j7DZvRlpooE2TF0_LJBhM6F2XKo1kchSBRV1e6C1hftFkWtrTk56UNIgZER-cYnYebpP9oqzXX4lLLDvoOiWImWxd3McNqI7A5z0szMQI3clLCFhvoYgEeD8/s1600/flowers">
</div>

Add your ain text/description to "hover right", "hover top", "hover left" together with "hover bottom" (2) together with supersede the url inwards bluish amongst the picture URL (3) where you lot desire to apply the effect.
Important! Do non click on the Compose tab, otherwise the changes volition hold upward lost.