How To Add Multi Mouse Hover Effect To Blogger Images With CSS Code

Views:

Friends, Now i share a beautiful multi mouse hover effect to blogger images. This is very special things before you see. This effect made up with pure CSS code. This effect is beautiful. We always think about mouse hover effects, when we play with codes. This effect shows different mouse over effect with movement of mouse. If mouse move left to right, you will see a mouse hover effect. Like that opposite direction. You can see different effect in up and down mouse movement. You can add this code to your blogger by using CSS and HTML codes. You can also add your text inside mouse hover effect. This is very nice trick for all, If you interested with this trick, Please follow this post and add this 4in1 effect to your blog…

LIVE DEMO

Hover Right Hover Top Hover Left Hover Bottom

First Log in your Blogger account.

Select Template option.

Click on Edit HTML option.

Find (CTRL+F) for </head> tag.

Then copy below CSS code and paste it before </head> tag.

<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>

Save your Template.

After that Copy below code and paste it, where you want to add multiple mouse hover effect.

<div class=multi-hover>
<span> Hover Right </span>
<span> Hover Top </span>
<span> Hover Left </span>
<span> Hover Bottom </span>

<img src=" YOUR - IMAGE - URL- HERE ">
</div>