我希望在悬停时放大图像,但要隐藏溢出在包含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/(在虚线边界外面缩放时隐藏的任何图像
答案 0 :(得分:4)
您需要在容器本身设置overflow: hidden;
,而不是图像。
#portfolioWrapper{
width:400px;
border: 3px dotted green;
overflow: hidden;
}
<强> Working Fiddle 强>
答案 1 :(得分:0)
首先用一个容器包装您的图片,在下面的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);
}