DailyKadenceWP 8: Infinite Horizonatal Logo Carousel (Marquee)

This post is about how to build an infinite-moving logo carousel using Kadence Blocks: a few images in a full-width row container.

Here is a preview of the end result:

How it’s built:

I built this section using the image block as a logo container and CSS animation.

This is the CSS I used:

/* Infinite Logo Carousel*/

/* Adding overflow hidden and display flex for the parent container */
.infinite-logo .kt-inside-inner-col {
 overflow: hidden;
 margin: 0 auto;
}

/* adding width and animation for the child element */
.infinite-logo .logo-img {
  min-width: 250px; 
  animation: slide 40s linear infinite;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1500px, 0, 0);   }
} 

I built a second version slightly different, with a gradient mask. The row inherits max-width from the theme (instead of full-width in the first case), and margin: 0 auto is not useful.

/* Infinite Logo Carousel with gradient mask*/

/* Adding overflow hidden and display flex for the parent container */
.infinite-logo-gradient .kt-inside-inner-col
{
 overflow: hidden;
   /* margin: 0 auto; */
  mask-image: linear-gradient(to right, transparent 0, black 128px, black calc(100% - 128px), transparent 100%),
  linear-gradient(to left, transparent 0, black 128px, black calc(100% - 128px), transparent 100%);
}

/* adding width and animation for the child element */
.infinite-logo-gradient .logo-img {
  min-width: 250px; 
  animation: slide 40s linear infinite;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1500px, 0, 0);   }
} 

You can find the end result on my KadenceWP Demo Website: Infinite Logo Carousel.