Question

I am trying to create on zoom hover effect and with help of some external I created a responsive grid with smooth zoon in, but unfortunately it effects the behavior of grid if a user resizes the browser manually in next 3 following links I will try to present how the zoom effect was achieved and what it did.

This link will display how grid worked at the beginning without any CCS and JavaScript yet applied to achieve zoom in.

Codepen.io link

If you will resize the browser window everything works great at this point.

Here goes CSS

.item-inner {
  overflow:hidden;
}

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

.item-inner img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Codepen.io link

At this point the zooming on hover effect is applied and if you resize the browser width everything is still works fine, but cause that regardless of overflow: hidden it grows in size, so later I add JavaScript to stop that.

JavaScript Time
```
$(document).function(){
  $('.item-inner').each(function(){
    var img = $(this).find('img');
    $(this).css({height:img.height(), width:img.width()});
  })
})
```
Codepen.io link

At this point images don't exceed the default image size, but unfortunately create very unpleasant behavior of the grid if the user decides to resize the browser width manually.

I will appreciate a lot if you will suggest how to resolve this issue or maybe suggest way another approach to achieve this kind of on hover zoom in?

Zoom in on hover effect

0 个答案: