1.首先我们先来看一下最终实现的效果：
2. 刚开始的时候我并没有实现这个效果，遇到的问题就是 鼠标经过图片时，图片可以放大，但是图片会超出父盒子，不是在父盒子里面进行的放大，效果图如下：
3.这个问题如何解决呢，其实很简单 只需要在这个图片的父元素里添加 overflow：hidden;这个隐藏属性就ok了，这样当你图片发大时超出父盒子的部分会被隐藏掉，代码如下：
<style>
body {
background-color: pink;
}
div {
overflow: hidden;
width: 180px;
height: 130px;
margin: 50px auto;
border: 2px solid red;
}
img:hover {
animation: move .5s linear forwards;
}
@keyframes move {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
</style>
</head>
<body>
<div>
<img src="../image/picture.jpg" alt="" width="180px" height="130px">
</div>
</body>
⭐最后总结一下:实现鼠标经过图片 图片放大且不超出父盒子的解决方法就是： 在父元素里添加overflow：hidden属性。
扫一扫
4832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
