# Scrolling Logo Strip (Marquee)

> Turns any block with the class "wpide-marquee" (a Gallery, Row or Group of logos) into a smooth, endlessly scrolling strip that pauses on hover.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: marquee, logos, animation
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-logo-marquee/

## Code

```html
<style>
.wpide-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.wpide-marquee__track{display:flex;width:max-content;gap:var(--wpide-marquee-gap,48px);animation:wpide-marquee var(--wpide-marquee-speed,30s) linear infinite;}
.wpide-marquee__track>*{flex:0 0 auto;margin:0!important;}
.wpide-marquee:hover .wpide-marquee__track,.wpide-marquee:focus-within .wpide-marquee__track{animation-play-state:paused;}
@keyframes wpide-marquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.wpide-marquee{-webkit-mask-image:none;mask-image:none;}.wpide-marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}.wpide-marquee__track>[aria-hidden="true"]{display:none;}}
</style>
<script>
document.querySelectorAll('.wpide-marquee').forEach(function (el) {
    if (el.querySelector('.wpide-marquee__track')) { return; }
    var track = document.createElement('div');
    track.className = 'wpide-marquee__track';
    var items = Array.prototype.slice.call(el.children);
    items.forEach(function (child) { track.appendChild(child); });
    items.forEach(function (child) {
        var copy = child.cloneNode(true);
        copy.setAttribute('aria-hidden', 'true');
        copy.querySelectorAll('a, button').forEach(function (a) { a.setAttribute('tabindex', '-1'); });
        track.appendChild(copy);
    });
    el.style.display = 'block';
    el.appendChild(track);
});
</script>
```

## Notes

Add wpide-marquee under Advanced > Additional CSS class(es). Visitors who prefer reduced motion see a static, wrapping row instead.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Scrolling Logo Strip (Marquee)" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/