Commentary

• 1) Slider uses slick.
• 2) Enlarge the slide image by specifying scale(1.1) in the slider img tag.
  Specify transition-duration and transition-timing-function with transition.
• 3) If class of .slick-active is given in the center image, specify scale(1.0)

Back to Article

【jQuery】Technique to switch while zooming out image with slider/slick using transform:scale() in Zoom Out Effect | Demo page

※Please check using Developer tools

Japanese Page

Sponsored links

.slider img {
  transform-origin: center top;
  transform: scale(1.1);
  transition: 5s ease-out;
}
.slider .slick-active img {
  transform: scale(1.0);
}
  

$(function(){
  $('.slider').slick({
    fade: true,
    arrows: false,
    autoplay:true,
    autoplaySpeed:1500,
    pauseOnFocus: false,
    pauseOnHover: false
  });
});