Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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/
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
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 }}