Проблема с переполнением слайдера Slick

Question

Я пытаюсь масштабировать слайды при наведении. Но если я включаю переполнение оболочки, она также переполняется по оси 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 
}); 

Answer 1

Я думаю, вы должны масштабировать img вместо .slide. Я также добавил некоторые дополнения к .slide для размещения верхнего переполнения.

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