Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Display the overflowed content when hovering over the element with CSS

CSS Web Development Front End Technology

The CSS overflow property controls what happens when content exceeds its container's boundaries. By combining overflow with the :hover pseudo-class, you can reveal hidden content when users hover over an element.

Syntax

selector {
    overflow: hidden; /* Hide overflowed content initially */
}

selector:hover {
    overflow: visible; /* Show overflowed content on hover */
}

Example: Displaying Hidden Text on Hover

The following example demonstrates how to show overflowed text when hovering over a container −

<!DOCTYPE html>
<html>
<head>
<style>
    .demo {
        white-space: nowrap;
        width: 200px;
        overflow: hidden;
        border: 2px solid #3498db;
        padding: 10px;
        background-color: #ecf0f1;
        transition: overflow 0.3s ease;
    }
    
    .demo:hover {
        overflow: visible;
        background-color: #d5dbdb;
    }
</style>
</head>
<body>
    <p>Hover over the box below to see the complete text:</p>
    <div class="demo">This is a very long text that will be hidden due to overflow in the container.</div>
</body>
</html>

A blue-bordered box containing truncated text appears. When you hover over it, the complete text becomes visible, extending beyond the container's original boundaries.

Example: Multi-line Content with Scrollable Hover

For multi-line content, you can use overflow: auto to add scrollbars on hover −

<!DOCTYPE html>
<html>
<head>
<style>
    .content-box {
        width: 250px;
        height: 80px;
        overflow: hidden;
        border: 2px solid #e74c3c;
        padding: 15px;
        background-color: #fadbd8;
        transition: all 0.3s ease;
    }
    
    .content-box:hover {
        height: auto;
        max-height: 200px;
        overflow: auto;
        background-color: #f1948a;
    }
</style>
</head>
<body>
    <p>Hover to expand and scroll through the content:</p>
    <div class="content-box">
        This is a longer piece of content that contains multiple lines of text. 
        When you hover over this container, it will expand to show all the content 
        and allow you to scroll through it if necessary. This technique is useful 
        for creating compact layouts that reveal more information on interaction.
    </div>
</body>
</html>

A red-bordered box showing only the first few lines of text. On hover, the box expands to show all content with scrollbars if needed.

Key Properties

Property Value Description
overflow hidden Hides content that exceeds container bounds
overflow visible Shows all content, even if it overflows
white-space nowrap Prevents text from wrapping to new lines
transition all 0.3s ease Creates smooth animation between states

Conclusion

Using overflow: hidden with :hover pseudo-class provides an elegant way to manage content that exceeds container boundaries. This technique improves user experience by keeping layouts clean while making full content accessible on demand.

Updated on: 2026-03-15T12:34:14+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements