<style>
/* Position, max. Höhe + Breite der Animation */
.imglady  {
  position: relative;
  text-align:left;  
  width: auto;
  height: 200px;   /* height: 310px; */
  overflow:hidden;
}
 
/* Größe des Bildes */ 
.imglady img {
  position: absolute;
  object-fit:contain;
  width: auto;
  height: 200px;
  z-index: 2;
}
 
/* Größe der Schatten-Animation */
.imglady img:not(:first-child) {
  object-fit:contain;
  width: auto;
  height: 200px;
  animation: animate 4s linear infinite;
  animation-delay: calc(-0.8s * var(--i));
  opacity: 0.5;
  z-index: 1;
}
 
@keyframes animate {
0% {
    top: 0;
    left: 0;
    opacity: 0.5;
  }
  100% {
    top: 120px;
    left: 250px;
    opacity: 0;
  }
}
  
</style>
 
<div class="imglady">
 
    <img src="https://files.homepagemodules.de/b916726/a_26_0b9bef5e.png">
    <img src="https://files.homepagemodules.de/b916726/a_26_0b9bef5e.png" style="--i:1;">
    <img src="https://files.homepagemodules.de/b916726/a_26_0b9bef5e.png" style="--i:2;">
    <img src="https://files.homepagemodules.de/b916726/a_26_0b9bef5e.png" style="--i:3;">
    <img src="https://files.homepagemodules.de/b916726/a_26_0b9bef5e.png" style="--i:4;">
    <img src="https://files.homepagemodules.de/b916726/a_26_0b9bef5e.png" style="--i:5;">
 
</div>
 

<style>
.cat_coverpic { 
  height: auto !important;
}
 
.cat_coverpic img {
  position: relative;
  z-index: 30000;
}
 
.cat_coverpic img:not(:first-child) {
  z-index: 20000;
  opacity:0;
  position: absolute;
  animation:  animateBild 4s 0.5s linear forwards;
 
}
 
.cover_m {
  margin: auto;
  padding-top: 1px;
  top: 50%;
  transform: translate(-0%, -50%);
}
 
@keyframes animateBild {
0% {
    left:100px;
    opacity: 2.0;
  }
100% {
    left: 400px;
    opacity: 0;
  }
}
</style>
 

<script>
window.addEventListener('load', function(){
 
$('.cat_coverpic img').hover(function(){
  var effekt = $(this).attr('src');
  $(this).after('<img class="cover_m" src="'+effekt+'">');
}, function(){
  $('.cover_m').remove();
});
 
});
</script>
 

<style>
/* Bildergalerie*/
.gpic_pic {
  transform: translate(0, 0);
}
 
.gpicutre_wrap {
  z-index: 30000;
}
 
.gpic_pic img {
  position: relative;
  z-index: 10000;
}
 
.gpic_pic img:not(:first-child) {
  opacity:0;
  position: absolute;
  animation:  animateBild2 4s 0.5s linear forwards;
  z-index: 20000;
}
 
.cover_m {  
  margin: auto;
  padding-top: 1px;
  top: 50%;
  transform: translate(-0%, -50%);
}
 
@keyframes animateBild2 {
0% {
    left:0;
    right:0;
    opacity: 2.0;
  }
100% {
    left: 400px;
    opacity: 0;
  }
}
 
</style>
 

<script>
window.addEventListener('load', function(){
 
$('.gpic_pic').hover(function(){
  var effekt = $('img',this).attr('src');
  $('img',this).after('<img class="cover_m" src="'+effekt+'">');
}, function(){
  $('.cover_m').remove();
});
 
});
</script>