溢出：隐藏效果的缩放图像

Question

我正在创建一个滑块，其中.slider-wrap是具有规则overflow: hidden;的父div overflow: hidden; 我希望每当我将鼠标悬停在div slider-boxes上时，所有图像都应放大，直到我使用overflow: hidden;为止，一切都可以正常工作overflow: hidden; 但是当我开始使用overflow: hidden; 图片未缩小，因为我未使用overflow: hidden; 代码段2中的“ 期望结果” overflow: hidden;

我想要像片段2这样的最终结果

但是我认为使用溢出很重要，因为当我将其设为动态时会出现更多的图像，因此有什么方法可以解决此问题。

这是jsfiddle https://jsfiddle.net/rhulkashyap/7g3vypqh/

片段1：我正在

 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> 

片段2：所需结果

 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

这不是最漂亮的解决方案，但确实可以解决。

添加一个

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

可以解决问题，但是并不能使放松效果变得非常漂亮。

小提琴