滑動滑塊滑動溢出問題

我試圖在懸停時縮放幻燈片。但是，如果我啓用包裝的溢出，它也在X軸溢出，我只希望它垂直溢出。請參閱codepen：http://codepen.io/faranali9/pen/qRPXGq 滑動滑塊滑動溢出問題

HTML：

<div class="wrapper"> 
    <div class="container slider"> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    <div class="slide"> 
     <img src="http://www.lorempixel.com/400/200/" alt="" /> 
     <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div> 
    </div> 
    </div> 
</div>

CSS：

.wrapper{ 
    padding:0 30px; 
} 

img{ 
    max-width:100%; 
} 
.slide{ 
    transition:all 0.3s; 
    transform-origin:center; 
} 

.slide:hover{ 
    transform:scale(1.3); 
} 

.description{ 
    display:none; 
} 
.slide:hover .description{ 
    display:block; 
}

JS：

$('.slider').slick(
{ 
    slidesToShow:5, 
    arrows:true 
});

來源

2017-01-26 Faran Ali

您是否嘗試過只用變換：將scaleX（）或變換：的scaleY（）在你的懸停事件？ – Mac

我認爲你應該縮放img而不是。我還爲添加了一些填充以適應頂部溢出。

https://codepen.io/anon/pen/egGyKw

來源

2017-01-26 16:53:33

謝謝，但我不能在我的情況下添加填充。我需要它長出和溢出。而且我不想讓包裝在懸停時調整高度（請參閱下一個按鈕，當鼠標懸停在圖像上時下去） –

哦，好運。 –

滑動滑塊滑動溢出問題

回答

相關問題