放大流体网格内的图像

Question

我正在使用 isotope plugin for fluid grid and would like to add some effects for images on hover, in this the grid has 3 different images with different height: jsfiddle code。有什么方法可以让它们保持响应并修复悬停缩放时的高度变化吗？请指教，哪里做错了？

HTML

<div class="item">
    <a href="https://twitter.com/">
      <img src="http://s9.postimg.org/n0sl7ucqn/image.jpg" alt="">
    </a>
</div>
<div class="item">
    <a href="https://twitter.com/">
      <img src="http://s17.postimg.org/6r28okkq7/image.jpg" alt="">
    </a>
</div>
<div class="item">
    <a href="https://twitter.com/">
      <img src="http://s17.postimg.org/c12m24flb/image.jpg" alt="">
    </a>
</div>

CSS

.item {
  width: 46.1%;
  height: auto;
  margin-right: 4%;
  margin-bottom: 30px;
  float: left;
  overflow: hidden;
}   

#social_indicator {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  text-align: right;
  margin-top: 0;
  margin-bottom: 0;
}

.item img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 3s ease;
  -moz-transition:    all 3s ease;
  -o-transition:      all 3s ease;
  -ms-transition:     all 3s ease;
  transition:         all 3s ease;
}

.item img:hover {
  width:   105%;
  height:  105%;
  margin-right: 1%;
  margin-bottom: 1%;
}

}

Answer 1

首先，overflow:hidden; 应该在 div 上，而不是图像上。

我会将 div 的高度设置为 jQuery 以防止它缩放，当图像缩放时：

$('.item > a > img').each(function(index, value){
    $(value).parent('a').parent('.item').height( $(value).height() );
});

记得在 <head> 中添加 jQuery-library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

放大流体网格内的图像

Zoom in image inside fluid grid

html

css

zooming