Marquee with Pause on Hover

Demo:

HTML

CSS

Preview

           
<div class="marquee-wrapper">
    <div class="marquee-container">
        <!-- ROW 1 – left to right -->
        <div class="marquee row1">
            <div>
                <!-- set 1 -->
                <div class="card"><h6>Insight One</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Two</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Three</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Four</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Five</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Six</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Seven</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Eight</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>

                <!-- set 2 (duplicate) -->
                <div class="card"><h6>Insight One</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Two</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Three</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Four</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Five</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Six</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Seven</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Insight Eight</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
            </div>
        </div>

        <!-- ROW 2 – right to left -->
        <div class="marquee row2" style="margin-top:3rem;">
            <div>
                <!-- set 1 -->
                <div class="card"><h6>Update Alpha</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Beta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Gamma</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Delta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Epsilon</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Zeta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Eta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Theta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>

                <!-- set 2 (duplicate) -->
                <div class="card"><h6>Update Alpha</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Beta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Gamma</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Delta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Epsilon</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Zeta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Eta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
                <div class="card"><h6>Update Theta</h6>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius.
                        Etiam nec ligula sed lorem rutrum aliquam.</p></div>
            </div>
        </div>
    </div>
</div>

           
      /* Wrapper */
        .marquee-wrapper {
            padding: 6rem 0 7rem;
                      margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #050505;
            color: #e0e0e0;
            overflow-x: hidden;
        }

        .marquee-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* Card */
        .card {
            flex: 0 0 auto;
            width: 240px;
            padding: 1.25rem 1.5rem;
            border: 1px solid #2a2a2a;
            border-radius: 1.25rem;
            background: linear-gradient(145deg, #111111, #0a0a0a);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition: all .25s ease;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .card:hover {
            border-color: #3a3a3a;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .card h6 {
            margin: 0;
            font-size: 15px;
            font-weight: 600;
            color: #ffffff;
            letter-spacing: -0.02em;
        }

        .card p {
            margin: 0;
            font-size: 14px;
            line-height: 1.6;
            color: #b0b0b0;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        @media (min-width: 640px) {
            .card {
                width: 460px;
                padding: 1.75rem 2rem;
                border-radius: 1.5rem;
                gap: 1rem;
            }

            .card h6 {
                font-size: 17px;
            }

            .card p {
                font-size: 15px;
            }
        }

        /* Marquee */
        .marquee {
            overflow: hidden;
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
        }

        .marquee > div {
            display: inline-flex;
            gap: 1rem;
            will-change: transform;
        }

        @media (min-width: 640px) {
            .marquee > div {
                gap: 1.5rem;
            }
        }

        /* Animations */
        .row1 > div {
            animation: marqueeLeft 62s linear infinite;
        }

        .row2 > div {
            animation: marqueeRight 54s linear infinite;
        }

        @media (max-width: 639px) {
            .row1 > div {
                animation-duration: 50s;
            }

            .row2 > div {
                animation-duration: 42s;
            }
        }

        @keyframes marqueeLeft {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-50%);
            }
        }

        @keyframes marqueeRight {
            from {
                transform: translateX(-50%);
            }
            to {
                transform: translateX(0);
            }
        }

        /* Pause on hover */
        .marquee:hover > div {
            animation-play-state: paused;
        }

Insight One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Seven

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Eight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Seven

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Insight Eight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Alpha

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Beta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Gamma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Delta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Epsilon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Zeta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Eta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Theta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Alpha

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Beta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Gamma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Delta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Epsilon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Zeta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Eta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Update Theta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies rutrum ante non varius. Etiam nec ligula sed lorem rutrum aliquam.

Did you like this CSS code snippet? Share it with your friends:

LAST UPDATED

October 29, 2025

HITS

620

Marquee with Pause on Hover

Demo:

Insight One

Insight Two

Insight Three

Insight Four

Insight Five

Insight Six

Insight Seven

Insight Eight

Insight One

Insight Two

Insight Three

Insight Four

Insight Five

Insight Six

Insight Seven

Insight Eight

Update Alpha

Update Beta

Update Gamma

Update Delta

Update Epsilon

Update Zeta

Update Eta

Update Theta

Update Alpha

Update Beta

Update Gamma

Update Delta

Update Epsilon

Update Zeta

Update Eta

Update Theta

Join the newsletter.