<div class="page">
  
   <div class="container">
     
     <div class="photo-container">
       <div class="photo-cont-item animation-1">
         <div class="photo-item photo-1"></div>
         <div class="photo-item photo-2"></div>
         <div class="photo-item photo-3"></div>
         <div class="photo-item photo-4"></div>
         <div class="photo-item photo-5"></div>
         <div class="photo-item photo-6"></div>
         
         <div class="photo-item photo-1"></div>
         <div class="photo-item photo-2"></div>
         <div class="photo-item photo-3"></div>
         <div class="photo-item photo-4"></div>
         <div class="photo-item photo-5"></div>
         <div class="photo-item photo-6"></div>
       </div>

       <div class="photo-cont-item animation-2">
         <div class="photo-item photo-7"></div>
         <div class="photo-item photo-8"></div>
         <div class="photo-item photo-9"></div>
         <div class="photo-item photo-10"></div>
         <div class="photo-item photo-11"></div>
         <div class="photo-item photo-12"></div>
         
         <div class="photo-item photo-7"></div>
         <div class="photo-item photo-8"></div>
         <div class="photo-item photo-9"></div>
         <div class="photo-item photo-10"></div>
         <div class="photo-item photo-11"></div>
         <div class="photo-item photo-12"></div>
       </div>

       <div class="photo-cont-item animation-3">
         <div class="photo-item photo-13"></div>
         <div class="photo-item photo-14"></div>
         <div class="photo-item photo-15"></div>
         <div class="photo-item photo-16"></div>
         <div class="photo-item photo-17"></div>
         <div class="photo-item photo-18"></div>
         
         <div class="photo-item photo-13"></div>
         <div class="photo-item photo-14"></div>
         <div class="photo-item photo-15"></div>
         <div class="photo-item photo-16"></div>
         <div class="photo-item photo-17"></div>
         <div class="photo-item photo-18"></div>
       </div>
     </div><!-- .photo-container -->
     
   </div><!-- .container -->
  
</div>
// Just for this sample
.page {
  margin: 10vh auto;
  display: flex;
  max-width: 1140px;
  background-color: #fff;
}


// Start here
.container {
  width: 100%;
  height: 80vh;
  background: #f3f4f5;
  border-radius: 30px;
  overflow: hidden;
}
.photo-container {
  position: relative;
  top: -90px; // Adjust
  left: -120px; // Adjust
  transform: rotate(10deg);
}
.photo-cont-item {
  display: flex;
  width: calc(380px * 6); // 320px + 60px margin
  .photo-item {
    width: 320px;
    height: 200px;
    margin-right: 60px;
    margin-bottom: 60px;
    border-radius: 16px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.15);
  }
}

// Every row
.animation-1 {
  animation: scroller 40s linear infinite;
  display: flex;
	width: calc(380px * 12);
}
.animation-2 {
  margin-left: 150px;
  animation: scroller 30s linear infinite;
  display: flex;
	width: calc(380px * 12);
}
.animation-3 {
  animation: scroller 50s linear infinite;
  display: flex;
	width: calc(380px * 12);
}


// Animations
@keyframes scroller {
	0% {
    transform: translateX(0);
  }
	100% {
    transform: translateX( calc(-380px * 6) ); // 320px + 60px margin
  }
}



// All selected images
.photo-1 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513400/Nature/image_18_lwam5y.jpg);
}
.photo-2 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513347/Nature/image_16_oqcpeb.jpg);
}
.photo-3 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513347/Nature/image_15_opmlwd.jpg);
}
.photo-4 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513346/Nature/image_14_nie14a.jpg);
}
.photo-5 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513346/Nature/image_13_kojf0w.jpg);
}
.photo-6 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513346/Nature/image_17_hngpby.jpg);
}
.photo-7 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513346/Nature/image_11_wcunjf.jpg);
}
.photo-8 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513346/Nature/image_9_stnpjs.jpg);
}
.photo-9 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_12_m3evi3.jpg);
}
.photo-10 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_10_euaoai.jpg);
}
.photo-11 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_7_apdkz1.jpg);
}
.photo-12 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_8_khwrpi.jpg);
}
.photo-13 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_5_vhwqqg.jpg);
}
.photo-14 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_2_nrbfpf.jpg);
}
.photo-15 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_4_qxw6i4.jpg);
}
.photo-16 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_3_ucohbw.jpg);
}
.photo-17 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_1_yitfy3.jpg);
}
.photo-18 {
  background-image: url(https://res.cloudinary.com/dzq1l03yt/image/upload/v1593513345/Nature/image_6_xcylqe.jpg);
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.