Question

我希望在悬停时放大图像，但要隐藏溢出在包含div上的图像的所有溢出。因此，隐藏在容器外部的图像的任何部分都是隐藏的。

#portfolioWrapper img{
  width: 100%;
  opacity: 1;
  -webkit-transform: scale(1,1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1,1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
}

#portfolioWrapper img:hover{
  opacity: .7;
  -webkit-transform: scale(1.05,1.07);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1.05,1.07);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
  position: relative;
  z-index: 99;
  overflow: hidden;
}

JSFiddle - http://jsfiddle.net/Md49g/（在虚线边界外面缩放时隐藏的任何图像

Answer 1

您需要在容器本身设置overflow: hidden;，而不是图像。

#portfolioWrapper{
    width:400px;
    border: 3px dotted green;
    overflow: hidden;
}

<强> Working Fiddle

Answer 2

首先用一个容器包装您的图片，在下面的intro-image-box中是容器。

<div class="intro-image-box">
   <img src="./resources/img/intro-office.jpg" alt="Intor office Image">
</div>

现在在您的CSS文件中

.intro-image-box{
  width: 100%;
  height: auto;
  border-radius: 1%;
  overflow: hidden;

}
.intro-image-box img{
  width: 100%;
  height: auto;
  border-radius: 1%;
  transform: scale(1.0);
  transition: transform 0.2s;
}
.intro-image-box img:hover {
  transform: scale(1.15);
}

CSS3缩放动画，隐藏溢出

2 个答案: