Question

基本上，当我的图像悬停在上面时，我希望它们悬停在容器内而不会破坏，因此溢出：隐藏。唯一的问题是出于某种原因，它扩展了容器的底部并且碰到了下面的内容。我该如何防止这种情况发生？

.image-hover-container {
    width: 50%;
    border-radius: 3px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    transform: translate3d(0,0,0);
}

.inner-container img {
    width: 100%;
    border-radius: 3px;
    transition: all .4s ease-in;
    /*   transform-origin: bottom center; */
}

.image-hover-container img:hover {
    transform: scale(1.1,1.1);
}

p {
    text-align: center;
    font-family: arial;
}

Answer 1

在overflow: hidden上添加.inner-container。即

.inner-container {
    overflow: hidden;
}

＆＃13;

.image-hover-container {
 
  width: 50%;
   border-radius: 3px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  transform: translate3d(0,0,0);
  
}

.inner-container {
  overflow: hidden;
}

.inner-container img {
   width: 100%;
   border-radius: 3px;
  transition: all .4s ease-in;
/*   transform-origin: bottom center; */
}

.image-hover-container img:hover {
    transform: scale(1.1,1.1);
}

p {
  text-align: center;
  font-family: arial;
}

＆＃13;

<div class="image-hover-container">
  <div class="inner-container">
  <img src="http://addisongabe.com/new/assets/images/store/typecouragements/preview/keep-on-exploring-preview.png" alt="Test Image" />
  </div>
  <p>Hello There</p>
  
</div>

＆＃13;

为什么我的图像在溢出中：隐藏的容器在悬停时向下扩展？

1 个答案: