The CSS3 transform: scale () may be implemented scaled or reduced function.
CSS3 CSS property values of the transition allows a smooth transition within a certain time interval. This effect can be a mouse click, focus, or by clicking on any element in triggering change, and smoothly animated CSS effects of changes in property values.
Results as shown below:
1, when the mouse is not placed on the non-image effect:
2, when the mouse into the picture (amplification process is animated transitions, this transition time can be customized):
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: #000 solid 1px;
margin: 50px auto;
overflow: hidden;
}
div img{
cursor: pointer;
transition: all 0.6s;
}
div img:hover{
transform: scale(1.4);
}
</style>
</head>
<body>
<div>
<img src="img/focus.png" />
</div>
</body>
</html>
1
2
3
4
5
6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21 is
22 is
23 is
24
25
26 is
27
28
wherein:
Transition: All 0.6s; represents all the attribute change is completed within a time period of 0.6s.
transform: scale (1.4); represents image on a mouse when placed in a scaled image 1.4 times.