Open In App

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

Last Updated : 20 May, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

The splitting of text on mouse move over is also known as the “SPLIT” effect or “BREAK” effect. The effect was really popular in web design in the past but now with emerging of new web design patterns, it has started to lose its place.

Approach: The approach is to split text into two parts using before and after selectors. Then we will use hover selector to make effect visible only on mouse hover. Now, let’s look at the implementation of the above approach.

HTML Code: The HTML code is used to create the structure of the body. In the following code, an <h1> element is used to write the text on the screen.




<!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>
</head>
  
<body>
    <h1 data-title="GeeksforGeeks">
        GeeksforGeeks
    </h1>
</body>
  
</html>


CSS Code:

  • Step 1: First, we have aligned our text to center and provide it font-size and basic styling.
  • Step 2: We have used before selector to make the top half of the text to be of white color.
  • Step 3: Then use after selector to cover the white area that we have created using before selector so that we can uncover it later using hover.
  • Step 4: Now use hover to uncover the effect on mouse hover.

Tip: You can use different values of z-index to make sure that the order remains the same and the value of margins used in the code can be adjusted according to the font-size of the text. Make sure to apply the same values to the border-bottom and top used in hover to make sure that the white covered area won’t be visible on mouse hover.




<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>


Complete Code: It is the combination of the above two sections to split text horizontally on mouse move over.




<!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:



Similar Reads

How to determine which element the mouse pointer move over using JavaScript ?
Given an HTML document and the task is to get the element where mouse pointer moves over. There are two approaches to solve this problem which are discussed below: Approach 1: Get the x and y coordinates value by using .clientX and .clientY property. Use document.elementFromPoint(x, y) method to get the element content on that position when mouse p
2 min read
How to Change Background Color of a Div on Mouse Move Over using JavaScript ?
The background color of the div box can be easily changed using HTML, CSS, and Javascript. We will use the querySelector() and addEventListener() methods to select the element and then apply some math logic to change its background color. The below sections will guide you on how to create the effect. HTML Code: In this section, we will create a bas
2 min read
Bottom Half Hidden Text Revealer on Mouse Over in CSS
In this CSS effect, the bottom half of the text is hidden, and when the user hovers over the text, some portion of the text becomes visible. This effect can be created by giving 0 brightness to text to be hidden and using the clip-path property to make it visible. JavaScript is used to get the cursor position. Approach: Create an HTML file with the
2 min read
How to center text (horizontally and vertically) inside a div block in CSS ?
Centering text both horizontally and vertically inside a div block is Important for creating visually appealing layouts. Various methods, such as flexbox, grid, and CSS transforms, offer solutions with distinct benefits and drawbacks. This article examines these common approaches for achieving text centering within div blocks. Table of Content Usin
4 min read
How to Horizontally Flip a Text Canvas using Fabric.js ?
In this article, we are going to see how to horizontally flip a canvas text in FabricJS. The text canvas means the text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox.Approach: To make this possible we are going to use a JavaScript library called FabricJS. After importing t
2 min read
How to move mouse pointer to a specific position using JavaScript ?
In this article, we will learn how to move a mouse pointer to any specific position in the web browser using JavaScript. Before we start, you need to know that it's not actually possible to move the mouse pointer to a position using Javascript, such functionality can be easily misused but we can simulate something similar. In this article, we will
4 min read
How to create a pop-up div on mouse over and stay when click using jQuery ?
In this article, we will learn how to create a pop-up div on mouseover and stay when click using jQuery. Approach: First, we create an HTML div element that we want to pop up when we mouse over on an element and set its display property to none in CSS style.display:none;In the script tag, we create a variable flag and set its value to -1. $flag = -
2 min read
How to spin text on mouse hover using HTML and CSS?
The spinning of text on mouse hover is known as the Spin Effect or the Rotation Effect. In this effect, each alphabet of the word is rotated along with any one of the axes (preferably Y-axis). Each word is wrapped inside in &lt;li&gt; tag and then using CSS:hover Selector selector we will rotate each alphabet on Y-axis. We will divide this article
2 min read
How to repeat background image vertically and horizontally using CSS ?
In this article, we are going to discuss the background image repeat property of CSS. Also, we are going to discuss how to repeat the background image in horizontal and vertical directions. The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will
2 min read
Make a div horizontally scrollable using CSS
In this article, we will learn how to design a horizontally scrollable div using CSS, &amp; will see its implementation through the example. We can make a div horizontally scrollable by using the CSS overflow property. There are different values in the overflow property. These are the following ways to make a div horizontally scrollable using CSS:
4 min read