Image animation up / down inside the div with Jquery

Question

I have this code that makes an animation of images ascending infinitely, but it doesn’t happen this, as I could arrange for it to have the same effect of this site

http://www.guiacatalao.com.br/empresa/pizza-food-a-pizza-no-cone,Tnpbeu1bpt0.html

.tech-slideshow {
  height: 200px;
  max-width:400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 200px;
  width: 200px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

@keyframes moveSlideshow {
  100% { 
    transform: translatey(-66.6666%);  
  }
}

<div class="tech-slideshow">
  <div class="mover-1"></div>
  <div class="mover-2"></div>
</div>

in jquery got so

jsfiddle.net/pG8kt

Answer 1

I created a similar effect, but I did not use background images, but images within divs. The script automatically picks up the height of the image and when it finishes rolling on div father, suffers a fadeOut() and the next one starts rolling up.

The interesting thing is that the images have the same height so that the transition time between them is equal. In the example I put the height of the images in 300px:

.tech-slideshow div img{
   width: 100%;
   height: 300px;
}

$(document).ready(function(){

   var container = $(".tech-slideshow").height();

   function animar(i){
      var $this = $(".tech-slideshow div:eq("+i+")");
      $this.css("z-index", "0");

      $this.animate({
         top: -Math.ceil($("img", $this).height())+container
      }, 2000, "linear", function(){
         $this.css("z-index", "1");
   
         i = i == $(".tech-slideshow div").length-1 ? 0 : i+=1;
         $(".tech-slideshow div:eq("+i+")").css("top", "0");
   
         animar(i);
   
         $("img", $this).fadeOut(800, function(){
            $this.css("top", container+"px").find("img").show();
         });
      });
   }
   
   animar(0);
});

.tech-slideshow{
   height: 200px;
   max-width:400px;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
   background: #ddd;
}

.tech-slideshow div{
   height: 200px;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.tech-slideshow div img{
   width: 100%;
   height: 300px;
}

.tech-slideshow div:not(:first-child){
   top: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tech-slideshow">
  <div class="mover"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"></div>
  <div class="mover"><img src="https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg"></div>
  <div class="mover"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmD3Svo4XWzYSRGCOyoIeXUlY3ZyJ8fI5Wu0bEgTme1_Rka3ttHg"></div>
</div>