Multi Hover Image With Text/HTML

You have been using so many codes to hover your Blogger Blog image in your post article or simply in your template. You have the hover effect which is pretty old and common as every ones. When you hover an image in different color but only one color can be choose to hover one image. Now I’m going to tech you in the post article that how to give your image multi-hover effect with Text/HTML shown on hover. This amazing and beautiful hover will bring some more traffic towards your blog. This trick is very simple to use with one just simple CSS code for one time and in every image you just need to have add one HTML code per image to hover it. Give hover to image that you want.

hover right hover top hover left hover bottom

Add CSS code to Blogger Blog:

Go to your Blogger account and open the template tabs right of your Blogger dashboard.
Click on the edit HTML and open it. The new window appears with your template codes.
Now press Ctrl + F the new light box will appears and put the below code in to it to find the correct code.

<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 When you post any images use this below code in your HTML tab. Beware put the code right place where you want to show your Multi hover image.

<span>hover right</span>
<span>hover top</span>
<span>hover left</span>
<span>hover bottom</span>
<img src="Image URL">
</div>

Remove the Blue color Image URL line with the URL of your desire image to hover.

You are all done from here post your article on your blog and when you visit your post article you are able to hover image in multi color style.

About Post Author:

This post is fruit of pen-clipping of Mohammad Hamza, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.

Tab 1 Top Area

Game Reviews

Friday 27 September 2013