我正在尝试通过使用 CSS 过渡在悬停时在固定大小的容器内增长图像来创建缩放效果。容器框架有边框和填充,我希望它们在图像增长时保留。问题是当它增长时,右边和底部的填充消失了。
这是CSS代码:
.videoframe {
width: 200px;
height: 113px;
border: solid 2px;
border-radius: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
overflow: hidden;
}
.videoframe img {
border-radius: 20px;
width: 200px;
height: 113px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.videoframe img:hover {
width: 300px;
height: 168px;
overflow: hidden;
}
这里是 HTML 代码:
<div class="videoframe"> <img src="image.jpg" /> </div>
当图像改变大小时,有没有办法在图像周围保持 10px 填充?