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!
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
No comments :
Post A Comment!
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV