放大流体网格内的图像-Zoominimageinsidefluidgrid

I am using 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. Is there some way to keep them responsive and fix heigh change on hover zoom? Please suggest, what has been done wrong?

我正在使用同位素插件进行流体网格,并希望在悬停时为图像添加一些效果,在此网格中有3个不同高度的图像:jsfiddle代码。有没有办法让他们保持响应并修复悬停缩放的高度变化?请建议,做错了什么?

HTML

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

}

1 个解决方案

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