Zoom from bottom

by dhavaljani

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="wrapper">
<ul id="slideshow" class="slider">
<li class="slide"><img src="http://placeholdit.imgix.net/~text?txtsize=96&bg=0088cc&txtclr=fff&txt=slide1&w=300&h=350&txttrack=0" /></li>
<li class="slide"><img src="http://placeholdit.imgix.net/~text?txtsize=96&bg=00FFcc&txtclr=fff&txt=slide2&w=400&h=300&txttrack=0" /></li>
<li class="slide"><img src="http://placeholdit.imgix.net/~text?txtsize=96&bg=cccccc&txtclr=fff&txt=slide3&w=300&h=350&txttrack=0" /></li>
</ul>

</div>

CSS

body {
  background: #666;
}
.wrapper {
  background: #000;
  width: 300px;
  height: 300px;
  border: 2px solid #333;
  margin: 20px auto;
}
.wrapper ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrapper ul li {
  width: 100%;
  height: 100%;
  text-align: center;
  display: none;
  overflow: hidden;
  transform: scale(1.25); 
}
/*
.wrapper ul li.active::nth-child(1n) {
  display: block;
  animation: expand 3s ease-out;
}
.wrapper ul li.active::nth-child(2n) {
  animation: expand 3s ease-out;
}*/
.wrapper ul li img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  position: relative;
	top: 50%;
	transform: translateY(-50%);
}
@keyframes expand {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale (1);
  }
  100% {
  transform: scale(1.25);
  }
}
.wrapper ul li.active {
  display: block;
  animation: expand 3s ease-in;  
}

JavaScript

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 0; // 1 second
var $time_between_slides = 5000; // 4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();
    
      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);
    
      if (slides().length == $i + 1) $i = -1; // loop to start
    
      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
);