Article directory
1. Demand analysis
By default, a picture is displayed in the interface:
When the mouse moves over the picture, the following effect is displayed, in which the picture is gradually enlarged with a transition:
2. Code analysis
The above box model layout structure is as follows, div is the outer parent container, a tag is used to set links, and img tag is used to display images;
<div>
<a href="#"><img src="images/pic.jpg" alt=""></a>
</div>
The above picture, even after zooming in, does not exceed the boundary of the div box model of the parent container, so it is necessary to set the content beyond the boundary to be hidden, and the parent container needs to be styled overflow: hidden;
/* 隐藏边界之外的元素 图片放大后不要超出边界 */
overflow: hidden;
Zooming in requires a process, here we set the transition animation duration of the zooming operation to 1 second;
div img {
/* 设置过渡动画 */
transition: all 1s;
}
After the mouse moves over the picture, zoom in, here use a pseudo-class selector to div img:hoverset the style of the mouse moving to div imgthe label;
div img:hover {
/* 设置 鼠标 移动到 div::before 伪元素 上的效果 */
/* 鼠标移动上去后 */
transform: scale(1.2);
}
3. Code example
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换 - scale 缩放</title>
<style>
div {
/* 设置浮动 令 div 从左到右排列 */
float: left;
/* 设置外边距 */
margin: 10px;
/* 隐藏边界之外的元素 图片放大后不要超出边界 */
overflow: hidden;
}
div img {
/* 设置过渡动画 */
transition: all 1s;
}
div img:hover {
/* 设置 鼠标 移动到 div::before 伪元素 上的效果 */
/* 鼠标移动上去后 */
transform: scale(1.2);
}
</style>
</head>
<body>
<div>
<a href="#"><img src="images/pic.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="images/pic.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="images/pic.jpg" alt=""></a>
</div>
</body>
</html>
4. Execution results
Results of the :
- The default state is:
- After the mouse moves to the first picture, the displayed style , the picture in the first chapter is enlarged within the scope of the div box model;
