How to Create Expanding Text on Hover with CSS

Introduction

Creating an expanding text effect on hover can make your web content more engaging and interactive. This effect enlarges the text when hovered over, creating a dynamic visual transformation. You can achieve this using the transform property in combination with transition for smooth animation.

In this tutorial, you'll learn how to create an expanding text effect on hover using HTML and CSS.

Problem Statement

Create a CSS code that:

Expands the size of text when hovered using transform: scale().
Demonstrates smooth transitions to create a seamless hover effect.

Example:

Input: A paragraph element with the text "Hover Over Me".
Output: The text expands smoothly when the user hovers over it.

Solution Steps

Use transform: scale() for Expanding Effect: Apply the transform: scale() property to enlarge the text on hover.
Use transition for Smooth Animation: Add the transition property to ensure the text expansion occurs smoothly over a set duration.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expanding Text on Hover</title>
    <style>
        /* Step 1: Define base text style */
        .expanding-text {
            font-size: 2rem;
            color: #3498db;
            font-family: Arial, sans-serif;
            display: inline-block;
            transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
        }

        /* Step 2: Apply expand effect on hover */
        .expanding-text:hover {
            transform: scale(1.5); /* Enlarge text by 1.5 times */
            color: #e74c3c; /* Change text color when hovering */
        }

        /* Center the text container */
        .container {
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="container">
        <p class="expanding-text">Hover Over Me</p>
    </div>

</body>
</html>

Output

Explanation

Step 1: Use `transform: scale()` for Expanding Effect

The transform: scale() property enlarges the text when hovered. It scales the text by a factor of 1.5, making it 150% of its original size:
```
.expanding-text:hover {
    transform: scale(1.5);
}
```

Step 2: Use `transition` for Smooth Animation

To ensure a smooth transition when the text expands, the transition property is used:
```
.expanding-text {
    transition: transform 0.3s ease, color 0.3s ease;
}
```
- 0.3s: The expansion happens over 0.3 seconds.
- ease: The transition starts slow, speeds up, and then slows down again.

Step 3: Add a Color Change on Hover

Along with the scaling effect, the text color is changed on hover for additional visual impact:
```
.expanding-text:hover {
    color: #e74c3c;
}
```

Step 4: Center the Text

Use text-align: center to center the text within its container and margin-top to add some vertical space:
```
.container {
    text-align: center;
    margin-top: 100px;
}
```

Conclusion

Creating an expanding text effect on hover with CSS is simple using the transform: scale() and transition properties. This effect enhances interactivity, making the text expand smoothly and change color when hovered over, creating a visually engaging experience for users on your webpage.

Java Guides

Search This Blog