@Kirinayik

Как сделать hover в slick slider?

Нужно при hover чтоб .slider__item был как на картинке 60796b1ac6fc1783043722.jpeg

максимум до чего додумался увеличить max-width и max-height, но так он расширяется вниз.
<section class="intro">
      <div class="slider">
         <div class="slider__item">
            <div class="item__image">
            </div>

            <div class="item__content">
               <h3 class="title">Title</h3>
               <p class="text">Lorem ipsum dolor sit amet consectetur.</p>

               <a class="btn" href="#">Button</a>
            </div>
         </div>

         <div class="slider__item">
            <div class="item__image">
            </div>

            <div class="item__content">
               <h3 class="title">Title</h3>
               <p class="text">Lorem ipsum dolor sit amet consectetur.</p>

               <a class="btn" href="#">Button</a>
            </div>
         </div>

         <div class="slider__item">
            <div class="item__image">
            </div>

            <div class="item__content">
               <h3 class="title">Title</h3>
               <p class="text">Lorem ipsum dolor sit amet consectetur.</p>

               <a class="btn" href="#">Button</a>
            </div>
         </div>

         <div class="slider__item">
            <div class="item__image">
            </div>

            <div class="item__content">
               <h3 class="title">Title</h3>
               <p class="text">Lorem ipsum dolor sit amet consectetur.</p>

               <a class="btn" href="#">Button</a>
            </div>
         </div>
      </div>
   </section>


.intro {
   width: 100%;
   min-height: 880px;
   background: radial-gradient(100% 100% at 50% 0%, #686C6F 0%, #373A3C 100%);
   padding: 97px 0 50px 67px;
}

.slider {}

.slider__item {
   max-width: 320px;
   width: 100%;
   min-height: 420px;
   background-color: #fff;
   border-radius: 4px;
   border: 1px solid #8DD83D;
   position: relative;
   margin: 0 10px 0 0;
   transition: all .3s ease-in-out 0s;
}

.slider__item:last-child {
   margin: 0;
}

.slider__item:hover {
   max-width: 352px;
   min-height: 460px;
}

.item__image {
   width: 100%;
   min-height: 180px;
   background-color: #FAFAFA;
}

.item__image img {
   max-width: 100%;
   width: 100%;
   max-height: 180px;
}


$('.slider').slick({
   dots: false,
   infinite: true,
   speed: 700,
   slidesToShow: 3,
   slidesToScroll: 3,
   centerPadding: '60px',
   centerMode: true
 });
  • Вопрос задан
  • 43 просмотра
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы