<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.