Overflow:hidden 效果缩放图片

Question

我正在创建一个滑块，其中 .slider-wrap 是父项 div 具有规则 overflow: hidden; 我希望我的每个图像应该在我悬停在 [=70= 上时放大] slider-boxes 在我使用 overflow: hidden; 之前一切正常，但是当我开始使用 overflow: hidden; 时图像不会缩小，因为 我没有使用 overflow: hidden;

的 片段 2 中的期望结果

我想要像 片段 2

这样的最终结果

但我认为 overflow 使用起来很重要，因为当我将其动态化时会有更多图像出现，所以有什么方法可以解决这个问题。

这是 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;
}

有诀窍，但它并没有使缓和变得非常漂亮..

Fiddle

Overflow:hidden 效果缩放图片

Overflow:hidden effecting zoom image

html

css

overflow