Super Simple CSS Only Animation with Hover Pause Functionality

CSS Only Animation with Hover Pause Functionality

If you’re just starting with CSS and want to make a cool, moving text effect, you’re in the right place!

We’ll show you how to create a marquee animation that scrolls text across the screen.

To make it even better, we’ll add a pause button when you hover over it so you can easily read the text or click any links.

Let’s get started!

What You Need To Know

Basic HTML and CSS knowledge: You should know a bit about these to follow along
A text editor: Use VS Code, Sublime Text, or even Notepad++
A web browser: You’ll need this to see your work, or you can add this code into an HTML Widget

Step 1: Set Up Your HTML Structure

First, we’ll create a simple HTML file. Inside this file, we’ll create a container to hold our scrolling text.

Create an HTML file and name it index.html , or add the HTML Widget in WordPress
Inside index.html Start with a basic HTML structure and add a div container for the text, or simply add the code to the widget on WordPress. This container will control how the text moves across the screen.

We’ll use two main parts,

The container: This holds everything and makes sure the text scrolls.
The marquee: This is where the actual moving text goes.

We’ll also use links within the text so you can click on them.

Here’s the HTML code to set up the container

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marquee Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css"> <!-- Link to your CSS file -->
</head>
<body>
<!-- Add only the below section to the HTML Widget-->
    <div class="marquee-container">
        <div class="marquee">
            <a href="#">Expand Your Reach</a> →
            <a href="#">Build Brand Authority</a> →
            <a href="#">Capture More Leads</a> →
            <a href="#">Drive More Sales</a>
        </div>
    </div>
<!-- Add only the above section to the HTML Widget-->
</body>
</html>

Step 2: Adding Basic CSS Styling

Next, create a style.css file in the same folder as index.html. Add the following CSS to set up basic styles for the marquee.

We’ll set up two main styles,

Container style: This sets the width and hides any overflowing text.
Marquee style: This makes the text move from right to left.

We’ll also use a preferred font to make the text look nice.

/* Link to the Preferred font from Google Fonts Goes Here */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Outer container for overflow control */.marquee-container {
    overflow: hidden;
    width: 100%;
    white-space: nowrap; /* Prevents text from wrapping */}

/* Inner marquee text */.marquee {
    display: inline-block;
    font-family: 'Poppins', sans-serif; /* Apply Preferred font */    font-size: 30px; /* Adjust size as needed */    color: #656565; /* Adjust color as needed */    padding-right: 100%; /* Ensures text starts off-screen */    animation: marquee 25s linear infinite; /* Animates text from right to left */}

.marquee a {
    text-decoration: none; /* Remove underline from links */    color: inherit; /* Ensures links have the same colour as text */    cursor: pointer; /* Show pointer cursor on hover */}

Step 3: Creating the Right-to-Left Animation

Next, we’ll create a smooth animation effect.

We’ll use ‘keyframes’ to define how the text moves over time.

It’ll start from the right and gradually move to the left.

Add the following CSS code to your style section file,

@keyframes marquee {
    0% {
        transform: translateX(100%); /* Start from right edge of the container */    }
    100% {
        transform: translateX(-100%); /* Move to the left edge, out of view */    }
}

Step 4: Pausing the Animation on Hover

Finally, we’ll make the animation pause when someone hovers over it. This will make it easier to read and click on links.

We’ll use a unique CSS trick to achieve this. This tells the browser to pause the animation anytime someone hovers over the .marquee element.

Add the following hover effect to your CSS.

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

Step 5: Making it Responsive

We’ll adjust the text size for phones and tablets using a special technique called ‘media queries’ to make it look good on smaller screens.

/* Responsive font size */@media (max-width: 768px) {
    .marquee {
        font-size: 18px; /* Smaller font for mobile */        padding-right: 200%; /* Increased padding for better scroll effect on smaller screens */        animation: marquee 30s linear infinite; /* Slower animation for mobile */    }
}

Complete CSS Code

This is a simple but cool way to add movement to your website using just CSS. It’s an excellent way to start learning about CSS animations. You can customise it by changing the speed, colour, and font size.

Now, your text scrolls smoothly and pauses when you hover over it, making it easy to read. Try experimenting with different settings to make it your own!

Here’s how the complete CSS code.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Outer container for overflow control */.marquee-container {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
}

/* Inner marquee text */.marquee {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    color: #656565;
    padding-right: 100%;
    animation: marquee 25s linear infinite;
}

/* Keyframes for right-to-left animation */@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

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

/* Remove underline and add pointer for links */.marquee a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Responsive font size */@media (max-width: 768px) {
    .marquee {
        font-size: 18px;
        padding-right: 200%;
        animation: marquee 30s linear infinite;
    }
}

Final Complete Code

Here’s the complete HTML code you can add directly to an HTML widget.

This code includes the HTML structure and the CSS styling for the marquee animation with a hover-pause effect.

Let’s break down how it works,

Font: We use a preferred font imported from Google Fonts.
CSS Trick: The CSS styles define how the text moves and looks. It makes the text scroll from right to left and pauses when you hover over it.
HTML Structure: We use two main HTML elements:
- .marquee-container: This holds everything and controls the scrolling area.
- .marquee: This contains the actual moving text.

<!-- Link to Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

<style>
    /* Outer container for overflow control */    .marquee-container {
        overflow: hidden;
        width: 100%;
        white-space: nowrap;
    }

    /* Inner marquee text */    .marquee {
        display: inline-block;
        font-family: 'Poppins', sans-serif;
        font-size: 30px; /* Adjust size as needed */        color: #656565; /* Adjust color as needed */        padding-right: 100%; /* Ensure text starts off-screen */        animation: marquee 25s linear infinite; /* Adjust speed as needed */    }

    /* Keyframes for right-to-left animation */    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

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

    /* Styling for links */    .marquee a {
        text-decoration: none; /* Remove underline */        color: inherit; /* Use the same color as text */        cursor: pointer; /* Show pointer cursor on hover */    }

    /* Responsive font size */    @media (max-width: 768px) {
        .marquee {
            font-size: 18px; /* Adjust font size for smaller screens */            padding-right: 200%; /* Increase padding for mobile screens */            animation: marquee 30s linear infinite; /* Even slower for mobile screens */        }
    }
</style>

<div class="marquee-container">
    <div class="marquee">
        <a href="https://hypesrilanka.com/services/online-advertising/">Expand Your Reach</a> →
        <a href="https://hypesrilanka.com/services/search-engine-optimization/">Build Brand Authority</a> →
        <a href="https://hypesrilanka.com/services/content-marketing/">Capture More Leads</a> →
        <a href="https://hypesrilanka.com/social-media-management/">Drive More Sales</a>
    </div>
</div>

Just add the Final Code to your HTML Widget, and you’ll have a cool scrolling text effect with clickable links that pause when you hover over them.

You can see this in action on our home page! Remember to check back into HypeX Digital Marketing Agency Website for more cool tips.

HypeX Team

We're on a mission to propel brands to new heights, constantly seeking the next frontier in forging meaningful brand connections.