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;
}

＆＃13;

.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);
}

＆＃13;

<div class="thumbnail">
						<div class="divIMG">
							<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
						</div>
					</div>

＆＃13;

<强> JSFiddle

使用带有父div的CSS3缩放图像时边框半径溢出

1 个答案: