Join the DZone community and get the full member experience.
Join For FreeDeploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Live Demo
download result
Ok, download the example files and lets start !
Step 1. HTML
First, let's prepare the main HTML markup for our demo gallery. As you can see – the resulting structure is quite easy. Here are set of DIV objects. Each of them contains one image and some virtual mask (DIV). The last 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://www.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. Please return to read our new tutorials!
Source: http://www.script-tutorials.com/css3-image-hover-effects/
Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}