CSS3 Image Hover Effects
Today I will tell you how to create different CSS3 image hover effects. I hope that you still remember our one old tutorial. We used javascript there. Today I will try to make something similar with using CSS3. In the result gallery page we will have 9 images, each of them have own hover effect.
Live Demo
download result
Ok, download the example files and lets start !
Step 1. HTML
First, lets prepare the main HTML markup for our demo gallery. As you can see – result structure is quite easy. Here are set of DIV objects. Each of them contain one image and some virtual mask (DIV). Last one element will contain two masks.
index.html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>CSS3 Image Hover Effects | Script Tutorials</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <link href="css/gall.css" rel="stylesheet" type="text/css" /> </head> <body> <header> <h2>CSS3 Image Hover Effects</h2> <a href="http://script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </header> <!-- panel with buttons --> <div class="photos"> <div> <img src="images/pic1.jpg" /> <div></div> </div> <div> <img src="images/pic2.jpg" /> <div></div> </div> <div> <img src="images/pic3.jpg" /> <div></div> </div> <div> <img src="images/pic4.jpg" /> <div></div> </div> <div> <img src="images/pic5.jpg" /> <div></div> </div> <div> <img src="images/pic6.jpg" /> <div></div> </div> <div> <img src="images/pic7.jpg" /> <div></div> </div> <div> <img src="images/pic8.jpg" /> <div></div> </div> <div class="pair"> <img src="images/pic9.jpg" /> <div></div> <div></div> </div> </div> </body> </html>
Step 2. CSS
I omit styles of layout.css. Here are nothing interesting. The most interesting – next one file (where I have prepared all necessary styles of our gallery):
css/gall.css
.photos { width: 945px; height: 400px; margin: 100px auto; position:relative; } .photos > div { background-color: rgba(128, 128, 128, 0.5); border: 2px solid #444; float: left; height: 100px; margin: 5px; overflow: hidden; position: relative; width: 300px; z-index: 1; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -ms-transform:scale(1.0); -o-transform:scale(1.0); transform:scale(1.0); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .photos > div img{ width: 100%; } .photos > div:hover{ z-index: 10; -webkit-transform:scale(2.0); -moz-transform:scale(2.0); -ms-transform:scale(2.0); -o-transform:scale(2.0); transform:scale(2.0); } .photos > div div { background: url(../images/hover.gif) repeat scroll 0 0 transparent; cursor: pointer; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; z-index: 15; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } .photos > div:nth-child(1):hover div { height: 0%; } .photos > div:nth-child(2):hover div { height: 0%; margin-top: 100px; } .photos > div:nth-child(3):hover div { width: 0%; } .photos > div:nth-child(4):hover div { margin-left: 300px; width: 0%; } .photos > div:nth-child(5):hover div { height: 0%; margin-left: 150px; margin-top: 50px; width: 0%; } .photos > div:nth-child(6):hover div { margin-left: 150px; width: 0%; } .photos > div:nth-child(7):hover div { height: 0%; margin-left: 150px; margin-top: 50px; width: 0%; -webkit-transform: rotateX(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } .photos > div:nth-child(8):hover div { height: 0%; margin-left: 150px; margin-top: 50px; width: 0%; -webkit-transform: rotateZ(600deg); -moz-transform: rotateZ(600deg); -ms-transform: rotateZ(600deg); -o-transform: rotateZ(600deg); transform: rotateZ(600deg); } .photos > div.pair div { width: 50%; } .photos > div.pair div:nth-child(odd) { margin-left: 150px; } .photos > div.pair:hover div { width: 0%; } .photos > div.pair:hover div:nth-child(odd) { margin-left: 300px; }
Live Demo
download result
Conclusion
Today we have nine great onhover image effects. Welcome back to read our new tutorials!
Thanks dude nice tuts. I am going to use one of my new site.
This helped me and using it I made a simple snippet to show the author info using the CSS3 hover effects
http://webstutorial.com/css3-image-hover-effects/css3
Nice tutorial. I will use in my blog very soon. Thanks so much
Very Nice Tutorial