Create Simple CSS3 Zoom In Effect On Mouse Hover
Recently, I’ve created a simple CSS3 Zoom In Effect On Mouse Hover. Before, this could only be possible with JavaScript but now it can be done easily with CSS3 transform and transition. Unfortunately, this effect only works in Chrome, Safari and FireFox. A working demo can be seen here.
The HTML
1
2
3
| <a href="#"> <img src="path-to-image.jpg" alt=""></a> |
The CSS
On normal state, we set the scale of the block to 100%. On hover state, the x scale is set to 105% and y scale to 107%. Note that we need to set timing function and duration for both states so that we have the transition effects on mouse hover as well as on mouse out events.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| a { text-decoration: none; display: block; width: 330px; height: 228px; float: left; margin: 0 3px 3px 0; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms;}a:hover { opacity: .7; -webkit-transform: scale(1.05,1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 250ms; -moz-transform: scale(1.05,1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 250ms; position: relative; z-index: 99;} |
