html - 带有父 div 的 CSS3 缩放图像有边界半径溢出

Question

我尝试在鼠标悬停图像时使用缩放图像(缩放 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/

有人知道解决方案吗？

附言。对不起我的英语。

Answer 1

您可以通过给 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>

JSFiddle