正常盒子:
直入主题,看效果:
思路:
1.实现放大效果,一般都用transform: scale(倍数)
2.因为内部放大,那么溢出的部分就得隐藏,因此我们可以给img图片包一个父盒子,给父盒子设置和img图片一样的宽高,然后设置溢出隐藏overflow:hidden;
3.最后加一下过渡动画就行了
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.img-box {
width: 200px;
height: 200px;
overflow: hidden;
}
img {
width: 200px;
height: 200px;
transition: all 0.5s;
}
img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="img-box">
<img src="./eat.jpg" alt="" />
</div>
</body>
</html>
弹性盒子:
新手刚做项目的时候,可能会出现下面的错误效果(我就是):
要实现的效果是:一个div盒子,里面有img和span两个标签,上下居中分布,因为整体用的弹性布局,所以一开始这样写的:
因为弹性布局中间还有空间,所以图片放大会往下走
解决方法:给img在包一个div,在把溢出隐藏设置在这个div上就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 200px;
height: 250px;
}
.img-box {
width: 200px;
height: 200px;
overflow: hidden;
}
img {
width: 200px;
height: 200px;
transition: all 0.5s;
}
img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="item">
<div class="img-box">
<img src="./eat.jpg" alt="" />
</div>
<span>吃饭</span>
</div>
</body>
</html>
效果: