父级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/

有人知道解决方案吗？

PS。 对不起我的英语。

Answer 1

您可以通过将其放置在.divIMG div中来保持其变形position: relative; ，并且z-index比其子图像更高。

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