CSS3 父 div 缩放图像有边界半径溢出

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

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

CSS3 父 div 缩放图像有边界半径溢出

Zoom image with CSS3 with parent div have border radius overflow

html

css

hover

zooming