javascript - Zoom in on hover effect -

i trying create on zoom hover effect , of external created responsive grid smooth zoon in, unfortunately effects behavior of grid if user resizes browser manually in next 3 following links try present how zoom effect achieved , did.

1. this link display how grid worked @ beginning without ccs , javascript yet applied achieve zoom in.
   
   codepen.io link
   
   if resize browser window works great @ point.
   

2. here goes css

   .item-inner {   overflow:hidden; }  .item-inner img {   width: 100%;   height: 100%;   -webkit-transition: 10s ease;   -moz-transition:    10s ease;   -o-transition:      10s ease;   -ms-transition:     10s ease;   transition:         10s ease; }  .item-inner img:hover {   -moz-transform: scale(1.1);   -webkit-transform: scale(1.1);   transform: scale(1.1); } 

   codepen.io link

   at point zooming on hover effect applied , if resize browser width still works fine, cause regardless of overflow: hidden grows in size, later add javascript stop that.

3. 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 point images don't exceed default image size, unfortunately create unpleasant behavior of grid if user decides resize browser width manually.

i appreciate lot if suggest how resolve issue or maybe suggest way approach achieve kind of on hover zoom in?