DailyKadenceWP 9: Infinite Horizonatal Logo Carousel (Marquee) with Pause on Hover

Adding a Pause on hover is useful for desktop users who want to have time to understand the content or to click on a link.

Here is a preview of the end result:

How it’s built:

Based on the same structure used for the Infinite Horizontal Carousel (Markee), the only difference is just in CSS.

This is the CSS:

/* Infinite Logo Carousel with Pause on Hover */

.infinite-logo-pause-hover .kt-inside-inner-col {
  display: block!important; 
  width: 100%; 
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  animation-play-state:running;
}

.infinite-logo-pause-hover .logo-img {
display: inline-block;
 min-width: 250px; 
 animation: slide 40s linear infinite;
  margin: 0;
cursor: pointer;
}
.infinite-logo-pause-hover .kt-inside-inner-col:hover .logo-img,
.infinite-logo-pause-hover .kt-inside-inner-col .logo-img:hover {
	animation-play-state: paused;
}

 @keyframes slide {
  0%   { transform: translateX(0); }
    100% { transform: translateX(-1000px); }
}

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