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
[sociallocker]
download result
[/sociallocker]
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
01 |
<!DOCTYPE html> |
02 |
<html lang="en" > |
03 |
<head> |
04 |
<meta charset="utf-8" /> |
05 |
<title>CSS3 Image Hover Effects | Script Tutorials</title> |
06 |
<link href="css/layout.css" rel="stylesheet" type="text/css" /> |
07 |
<link href="css/gall.css" rel="stylesheet" type="text/css" /> |
08 |
</head> |
09 |
<body> |
10 |
<header> |
11 |
<h2>CSS3 Image Hover Effects</h2> |
12 |
<a href="https://www.script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> |
13 |
</header> |
14 |
<!-- panel with buttons --> |
15 |
<div class="photos"> |
16 |
<div> |
17 |
<img src="images/pic1.jpg" /> |
18 |
<div></div> |
19 |
</div> |
20 |
<div> |
21 |
<img src="images/pic2.jpg" /> |
22 |
<div></div> |
23 |
</div> |
24 |
<div> |
25 |
<img src="images/pic3.jpg" /> |
26 |
<div></div> |
27 |
</div> |
28 |
<div> |
29 |
<img src="images/pic4.jpg" /> |
30 |
<div></div> |
31 |
</div> |
32 |
<div> |
33 |
<img src="images/pic5.jpg" /> |
34 |
<div></div> |
35 |
</div> |
36 |
<div> |
37 |
<img src="images/pic6.jpg" /> |
38 |
<div></div> |
39 |
</div> |
40 |
<div> |
41 |
<img src="images/pic7.jpg" /> |
42 |
<div></div> |
43 |
</div> |
44 |
<div> |
45 |
<img src="images/pic8.jpg" /> |
46 |
<div></div> |
47 |
</div> |
48 |
<div class="pair"> |
49 |
<img src="images/pic9.jpg" /> |
50 |
<div></div> |
51 |
<div></div> |
52 |
</div> |
53 |
</div> |
54 |
</body> |
55 |
</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
001 |
.photos { |
002 |
width: 945px; |
003 |
height: 400px; |
004 |
margin: 100px auto; |
005 |
position:relative; |
006 |
} |
007 |
.photos > div { |
008 |
background-color: rgba(128, 128, 128, 0.5); |
009 |
border: 2px solid #444; |
010 |
float: left; |
011 |
height: 100px; |
012 |
margin: 5px; |
013 |
overflow: hidden; |
014 |
position: relative; |
015 |
width: 300px; |
016 |
z-index: 1; |
017 |
-webkit-border-radius: 10px; |
018 |
-moz-border-radius: 10px; |
019 |
-ms-border-radius: 10px; |
020 |
-o-border-radius: 10px; |
021 |
border-radius: 10px; |
022 |
-webkit-transform:scale(1.0); |
023 |
-moz-transform:scale(1.0); |
024 |
-ms-transform:scale(1.0); |
025 |
-o-transform:scale(1.0); |
026 |
transform:scale(1.0); |
027 |
-webkit-transition-duration: 0.5s; |
028 |
-moz-transition-duration: 0.5s; |
029 |
-ms-transition-duration: 0.5s; |
030 |
-o-transition-duration: 0.5s; |
031 |
transition-duration: 0.5s; |
032 |
} |
033 |
.photos > div img{ |
034 |
width: 100%; |
035 |
} |
036 |
.photos > div:hover{ |
037 |
z-index: 10; |
038 |
-webkit-transform:scale(2.0); |
039 |
-moz-transform:scale(2.0); |
040 |
-ms-transform:scale(2.0); |
041 |
-o-transform:scale(2.0); |
042 |
transform:scale(2.0); |
043 |
} |
044 |
.photos > div div { |
045 |
background: url(../images/hover.gif) repeat scroll 0 0 transparent; |
046 |
cursor: pointer; |
047 |
height: 100%; |
048 |
left: 0; |
049 |
opacity: 0.5; |
050 |
position: absolute; |
051 |
top: 0; |
052 |
width: 100%; |
053 |
z-index: 15; |
054 |
-webkit-transition-duration: 0.5s; |
055 |
-moz-transition-duration: 0.5s; |
056 |
-ms-transition-duration: 0.5s; |
057 |
-o-transition-duration: 0.5s; |
058 |
transition-duration: 0.5s; |
059 |
} |
060 |
.photos > div:nth-child(1):hover div { |
061 |
height: 0%; |
062 |
} |
063 |
.photos > div:nth-child(2):hover div { |
064 |
height: 0%; |
065 |
margin-top: 100px; |
066 |
} |
067 |
.photos > div:nth-child(3):hover div { |
068 |
width: 0%; |
069 |
} |
070 |
.photos > div:nth-child(4):hover div { |
071 |
margin-left: 300px; |
072 |
width: 0%; |
073 |
} |
074 |
.photos > div:nth-child(5):hover div { |
075 |
height: 0%; |
076 |
margin-left: 150px; |
077 |
margin-top: 50px; |
078 |
width: 0%; |
079 |
} |
080 |
.photos > div:nth-child(6):hover div { |
081 |
margin-left: 150px; |
082 |
width: 0%; |
083 |
} |
084 |
.photos > div:nth-child(7):hover div { |
085 |
height: 0%; |
086 |
margin-left: 150px; |
087 |
margin-top: 50px; |
088 |
width: 0%; |
089 |
-webkit-transform: rotateX(360deg); |
090 |
-moz-transform: rotate(360deg); |
091 |
-ms-transform: rotate(360deg); |
092 |
-o-transform: rotate(-360deg); |
093 |
transform: rotate(-360deg); |
094 |
} |
095 |
.photos > div:nth-child(8):hover div { |
096 |
height: 0%; |
097 |
margin-left: 150px; |
098 |
margin-top: 50px; |
099 |
width: 0%; |
100 |
-webkit-transform: rotateZ(600deg); |
101 |
-moz-transform: rotateZ(600deg); |
102 |
-ms-transform: rotateZ(600deg); |
103 |
-o-transform: rotateZ(600deg); |
104 |
transform: rotateZ(600deg); |
105 |
} |
106 |
.photos > div.pair div { |
107 |
width: 50%; |
108 |
} |
109 |
.photos > div.pair div:nth-child(odd) { |
110 |
margin-left: 150px; |
111 |
} |
112 |
.photos > div.pair:hover div { |
113 |
width: 0%; |
114 |
} |
115 |
.photos > div.pair:hover div:nth-child(odd) { |
116 |
margin-left: 300px; |
117 |
} |
Live Demo
Conclusion
Today we have nine great onhover image effects. Welcome back to read our new tutorials!