html - Overflow:hidden effecting zoom image -

i'm creating slider .slider-wrap parent div has rule overflow: hidden; , want every image should zoom in whenever hover on div slider-boxes working fine until i'm using overflow: hidden; when start use overflow: hidden; image doesn't zoom out desired result in snippet 2 i'm not using overflow: hidden;

i want final result snippet 2

but think overflow important use because there more images come when make dynamic there way fix issue.

here jsfiddle https://jsfiddle.net/rhulkashyap/7g3vypqh/

snippet 1: i'm getting

body{    background-color: #dd3735;    padding-top:30px;  }  .slider-wrap{    width:616px;    height:120px;    border:1px solid #ccc;    margin:0 auto;    box-shadow: 0 0 10px #000;    border-radius:5px;    overflow:hidden;  }  img, .slider-boxes{    width:120px;    height:120px;  }  .slider-boxes{    display: inline-block;    -webkit-transition: .2s ease-in-out;    transition: .2s ease-in-out;  }  .slider-boxes:hover{    -webkit-transform: scale(1.30);            transform: scale(1.30);    box-shadow: 0 0 10px #000;    }

<div class="slider-wrap">    <div class="slider-boxes"><img src="https://pbs.twimg.com/profile_images/378800000108340114/a586d7a8df39836a114651aef74cd2d0_400x400.jpeg" alt="image1"></div>    <div class="slider-boxes"><img src="https://s-media-cache-ak0.pinimg.com/736x/77/06/4e/77064e4e9ccc289ee5394dd7dbf48011.jpg" alt="image2"></div>    <div class="slider-boxes"><img src="http://gloimg.gearbest.com/gb/2014/201411/goods-img/1415993980392-p-2179386.jpg" alt="image3"></div>    <div class="slider-boxes"><img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" alt="image4"></div>    <div class="slider-boxes"><img src="http://howtodrawdat.com/wp-content/uploads/2014/01/1st-pic-dave-minion-from-despicable-me.png" alt="image5"></div>    </div>

snippet 2: desired result

body{    background-color: #dd3735;    padding-top:30px;  }  .slider-wrap{    width:616px;    height:120px;    border:1px solid #ccc;    margin:0 auto;    box-shadow: 0 0 10px #000;    border-radius:5px;    }  img, .slider-boxes{    width:120px;    height:120px;  }  .slider-boxes{    display: inline-block;    -webkit-transition: .2s ease-in-out;    transition: .2s ease-in-out;  }  .slider-boxes:hover{    -webkit-transform: scale(1.30);            transform: scale(1.30);    box-shadow: 0 0 10px #000;    }

<div class="slider-wrap">    <div class="slider-boxes"><img src="https://pbs.twimg.com/profile_images/378800000108340114/a586d7a8df39836a114651aef74cd2d0_400x400.jpeg" alt="image1"></div>    <div class="slider-boxes"><img src="https://s-media-cache-ak0.pinimg.com/736x/77/06/4e/77064e4e9ccc289ee5394dd7dbf48011.jpg" alt="image2"></div>    <div class="slider-boxes"><img src="http://gloimg.gearbest.com/gb/2014/201411/goods-img/1415993980392-p-2179386.jpg" alt="image3"></div>    <div class="slider-boxes"><img src="https://pbs.twimg.com/profile_images/378800000451012500/4628fbb9dc70514d389ed9491243866f_400x400.png" alt="image4"></div>    <div class="slider-boxes"><img src="http://howtodrawdat.com/wp-content/uploads/2014/01/1st-pic-dave-minion-from-despicable-me.png" alt="image5"></div>    </div>

this not prettiest solution, solve somewhat..

adding a

.sliding-wrap:hover {   overflow: visible; } 

does trick, doesn't make easing out pretty..

fiddle