Overflow:hidden effecting zoom image - html

Question

I'm creating a slider where .slider-wrap is a parent div which has rule overflow: hidden; and I want my every image should zoom in whenever I hover on div slider-boxes everything is working fine until I'm using overflow: hidden; but when I start to use overflow: hidden; image doesn't zoom out as the Desired Result in Snippet 2 where I'm not using overflow: hidden;
I want my final result like Snippet 2
But I think overflow is important to use because there will be more images come when I will make it dynamic so is there any way to fix this issue.
here is the 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: all .2s ease-in-out;
transition: all .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: all .2s ease-in-out;
transition: all .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>

Answer 1

This is not the prettiest solution, but it does solve it somewhat..
Adding a
.sliding-wrap:hover
{
overflow: visible;
}
does the trick, but it doesn't make the easing out very pretty..
Fiddle