Learn how to create a smooth, responsive infinite logo carousel using only HTML and CSS. In this tutorial, you’ll build a seamless scrolling logo slider with no JavaScript, no plugins, and no external libraries. Perfect for client logos, partner logos, testimonials, and brand showcases in any website project.
Timestamps:
- 0:00 Intro / Demo
- 1:31 Add HTML Code
- 2:33 Add CSS Code
- 3:16 Add Logo URLs
- 4:16 Change Logo Size and Spacing
- 5:31 How the CSS Animation Works (Reverse Example)
- 7:16 Fix Blank Gaps
- 9:47 CSS Pause on Hover
- 10:11 Before & After Color Gradient
- 11:15 Change Logo Size on Mobile
HTML Code
<div class="logos">
<div class="logos-track">
<div class="logos-slide">
<img decoding="async" src="image1.jpg" />
<img decoding="async" src="image2.jpg" />
<img decoding="async" src="image3.jpg" />
<img decoding="async" src="image4.jpg" />
<img decoding="async" src="image5.jpg" />
<img decoding="async" src="image6.jpg" />
</div>
<div class="logos-slide">
<img decoding="async" src="image1.jpg" />
<img decoding="async" src="image2.jpg" />
<img decoding="async" src="image3.jpg" />
<img decoding="async" src="image4.jpg" />
<img decoding="async" src="image5.jpg" />
<img decoding="async" src="image6.jpg" />
</div>
</div>
</div>
</div>
CSS Code
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.logos {
overflow: hidden;
position: relative;
}
.logos:before,
.logos:after {
position: absolute;
top: 0;
width: 100px;
height: 100%;
content: "";
z-index: 2;
}
.logos:before {
left: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #D6D6D6);
}
.logos:after {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #D6D6D6);
}
.logos:hover .logos-track {
animation-play-state: paused;
}
.logos-slide {
display: flex;
align-items: center;
}
.logos-slide img {
height: auto;
width: 160px;
margin: 0 40px;
display: block;
}
.logos-track {
display: flex;
align-items: center;
width: max-content;
animation: slide 10s linear infinite;
}
@media (max-width: 767px) {
.logos-slide img {
width: 80px;
margin: 0 15px;
}
}
