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.
- 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.
Complete Code: It is the combination of the above two sections to split text horizontally on mouse move over.
- How to Horizontally Flip a Text Canvas using Fabric.js ?
- How to horizontally center a div using CSS?
- How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
- Make a div horizontally scrollable using CSS
- How to spin text on mouse hover using HTML and CSS?
- How to vertically and horizontally align flexbox to center ?
- Text Animation with changing the color of the text using HTML & CSS
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- How to Zoom an Image on Mouse Hover using CSS ?
- Design Smiley Face Eyes that follow Mouse Cursor using CSS and JS
- How to overlay one div over another div using CSS
- How to make the cursor to hand when a user hovers over a list item using CSS?
- Display div element on hovering over <a> tag using CSS
- Advantage of CSS3 over CSS
- Double Layered Text Effect using CSS
- How to disable text selection highlighting using CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.