<div class="slider">
  <div class="slide-track">
    <div class="slide"><img src="https://images.unsplash.com/photo-1523318840068-3e8c0f998509?q=80&w=80&h=80&auto=format&fit=crop" alt=""></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1561187273-70ca0be59cd4?q=80&w=80&h=80&auto=format&fit=crop" alt=""></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1707584293190-89596995d344?q=80&w=80&h=80&auto=format&fit=crop" alt=""></div>
    <div class="slide"><img src="https://images.unsplash.com/photo-1633107398543-5d285bc49875?q=80&w=80&h=80&f" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&5" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&6" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&7" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&8" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&9" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&10" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&11" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&12" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&13" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&14" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&15" alt=""></div>
    
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&1" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&2" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&3" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&4" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&5" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&6" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&7" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&8" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&9" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&10" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&11" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&12" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&13" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&14" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&15" alt=""></div>
  </div>
  
  <div class="slide-track2">
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&1" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&2" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&3" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&4" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&5" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&6" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&7" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&8" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&9" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&10" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&11" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&12" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&13" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&14" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&15" alt=""></div>
    
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&1" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&2" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&3" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&4" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&5" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&6" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&7" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&8" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&9" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&10" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&11" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&12" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&13" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&14" alt=""></div>
    <div class="slide"><img src="https://source.unsplash.com/featured/80x80?pic&15" alt=""></div>
  </div>
  
</div>

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.slider {
  height: 85px;
  margin: auto;
  position: relative;
  width: 85%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.slide-track {
  display: flex;
  width: calc(80px * 30);
  animation: scroll 40s linear infinite;
}

.slide-track:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-80px * 15));
  }
}

.slide {
  height: 80px;
  width: 80px;
  display: flex;
  align-items: center;
  padding: 5px;
  justify-content:space-between;
  perspective: 100px;
} 
img {
  display:block;
  // width: 100%;
  height: 100%;
  border-radius:999px;
  transiton: transform .2s;
   -webkit-transition: transform .2s ease-in-out;
  object-fit:cover;
}

img:hover {
  transform: translateZ(15px);
}

.slider::before,
.slider::after {
  content: '';
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  height: 100%;
  position: absolute;
  width: 15%;
  z-index:2;
}

.slider::before {
  left: 0;
  top: 0;
}
.slider::after {
  right: 0;
  top: 0;
  transform:rotateZ(180deg);
}