图片悬停效果扩展到容器外

Question

我目前有一个应用了 'greyscale to colour' 和 'zoom' 效果的图像网格。缩放效果在容器外扩展。我应用了 overflow: hidden（几次）并设置了 max-width。然而，这些尝试都没有成功。这是我的 JSFiddle.

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

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

Answer 1

图像容器是 a 标签，因此您应该在此元素上设置 overflow: hidden：

.rows li a {
  float: left;
  width: 50%;
  overflow: hidden;
}

将以上代码添加到您的 css 并将 html 中的所有图像宽度设置为 100%:

<a href="#"><img src="http://lorempixel.com/400/200/" alt="Case Study" width="100%" height="auto" style="float:left"></a>

图片悬停效果扩展到容器外

Image hover effect expanding outside container

html

css

hover

css-transitions