How to split text horizontally on mouse move over using CSS ?

Last Updated : 07 Oct, 2024

The SPLIT or BREAK effect is a captivating technique where text splits horizontally on hover, enhancing user interaction. Using CSS transitions, pseudo-elements, and positioning, this effect creates dynamic, layered text with smooth transitions, resulting in an engaging and visually striking animation.

Approach

HTML Structure: Use an <h1> element with the text set via the data-title attribute for both normal and split effects.
Positioning Text: Use position: absolute to place the text and apply different z-index values for layered effects.
Pseudo-elements: Use ::before and ::after pseudo-elements to create two layers of the same text with different colors and heights.
Hover Effect: On hover, adjust the top property and apply a border-bottom to the ::after pseudo-element to simulate the split.
Smooth Transition: Add transition: .5s to the ::after element for a smooth animation effect during the hover state.

Example : In this example we are following above- explained approach.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Split Effect </title>

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        h1 {
            top: 40%;
            left: 33%;
            position: absolute;
            font-size: 60px;
            z-index: -1;
        }

        h1::before {
            content: attr(data-title);
            position: absolute;
            height: 50%;
            overflow: hidden;
            color: whitesmoke;
            z-index: 1;
            top: 0;
            left: 0;
        }

        h1::after {
            content: attr(data-title);
            position: absolute;
            height: 53%;
            top: 0;
            left: 0;
            overflow: hidden;
            color: black;
            border-bottom: 0px solid red;
            z-index: 2;
            transition: .5s;
        }

        h1:hover::after {
            border-bottom: 5px solid red;
            top: -5px;
        }
    </style>
</head>

<body>
    <h1 data-title="GeeksforGeeks">
        GeeksforGeeks
    </h1>
</body>

</html>

Output:

How to create horizontal scrollable sections using CSS ?

sirohimukul1999

Improve

Article Tags :

How to split text horizontally on mouse move over using CSS ?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?