我尝试在鼠标悬停图像时使用缩放图像(缩放 CSS3)动画,但我在动画期间遇到溢出问题,我想使用标签 <img>
因为我想在图像之外放置背景颜色(具有背景透明度)
这是我的问题:
HTML:
<div class="thumbnail">
<div class="divIMG">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
</div>
</div>
CSS:
.thumbnail {
margin-top: 20px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail div.divIMG {
border-radius: 50%;
border: 4px solid #08456f;
width:200px;
height:200px;
overflow:hidden;
margin: 0 auto;
}
.thumbnail img {
background-color: #c3d3de;
width: 100%;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.thumbnail div.divIMG:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
https://jsfiddle.net/j1rdv968/
有人知道解决方案吗?
附言。对不起我的英语。
最佳答案
您可以通过给 position: relative;
和更高的 z-index
将转换图像保留在 .divIMG
div 中> 比它的子图像。
CSS
.thumbnail div.divIMG {
z-index: 3;
position: relative;
}
.thumbnail img {
z-index: 2;
}
.thumbnail {
margin-top: 20px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail div.divIMG {
border-radius: 50%;
border: 4px solid #08456f;
width:200px;
height:200px;
overflow:hidden;
margin: 0 auto;
z-index: 3;
position: relative;
}
.thumbnail img {
background-color: #c3d3de;
width: 100%;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
z-index: 2;
}
.thumbnail div.divIMG:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
<div class="thumbnail">
<div class="divIMG">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
</div>
</div>
关于html - 带有父 div 的 CSS3 缩放图像有边界半径溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38750539/