[英]Image hover effect expanding outside container
I currently have a grid of images with a 'greyscale to colour' and 'zoom' effect applied. 我目前使用的图像网格应用了“灰度到彩色”和“缩放”效果。 The zoom effect is expanding outside the container. 缩放效果正在容器外部扩展。 I have applied overflow: hidden
(a couple of times) and set a max-width
. 我已应用overflow: hidden
(几次)并设置max-width
。 However, these attempts have been unsuccessful. 但是,这些尝试均未成功。 Here is my JSFiddle . 这是我的JSFiddle 。
HTML 的HTML
<div class="content">
<ul class="rows">
<li>
<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a>
</li>
<li>
<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a>
</li>
<li>
<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a>
</li>
<li>
<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style=" float:left"></a>
</li>
<li>
<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a>
</li>
<li>
<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="50%" height="auto" style="float:left"></a>
</li>
</ul>
</div>
CSS 的CSS
.content {
width: 100%;
height: auto;
min-height: 100%;
}
.rows {
list-style: none;
overflow: hidden;
width: 100%;
}
.rows li a img {
max-width: 100%;
overflow: hidden;
}
.rows a img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
-webkit-filter: grayscale(100%) opacity(0.7);
filter: grayscale(100%) opacity(0.7);
}
.rows a img:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: grayscale(0) opacity(1);
filter: grayscale(0) opacity(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
Container of images is a
tag, so you should set overflow: hidden
on this element: 图片容器是a
标签,因此您应该在以下元素上设置overflow: hidden
:
.rows li a {
float: left;
width: 50%;
overflow: hidden;
}
Add above code to your css and set all your images width in html to 100%
: 将以上代码添加到您的CSS中,并将html中所有图像的宽度设置为100%
:
<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="100%" height="auto" style="float:left"></a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.