Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Text Split Effect using CSS

  • Last Updated : 31 Oct, 2021

In this article, we will see how we can create a text split effect using CSS.  HTML code is used to create the basic structure of the sections and CSS code is used to set the style.

Approach:

  • Create an HTML div element with the class “container”.
  • Inside the “container”,  create an HTML div with class “box”.
  • Create two p tags with text.
  • To split the text we are going to provide the text shape using clip-path and then use transform property on hover to translate it.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style type="text/css">
  
    /* Aligining container in center*/
    .container {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 35%;
        left: 35%;
        color: green;
    }
  
    /* General styling to text and 
       transition of 2s*/    
    .text {
        position: absolute;
        text-transform: uppercase;
        font-size: 3rem;
        transition: 2s ease;
    }
  
    /* Giving shapes to text using clip-path*/    
    .text1 {
        clip-path: polygon(0 0, 100% 0,
             100% 100%, 50% 0, 0 100%);
    }
      
    .text2 {
        clip-path: polygon(0 100%, 50% 0, 
           100% 100%, 100% 100%, 0 100%);
    }
  
    /* transforming box 1 position on hover */    
    .box:hover .text1 {
        transform: translateY(-10px);
    }
  
    /* transforming box 2 position on hover */    
    .box:hover .text2 {
        transform: translateY(10px);
    }
    </style>
</head>
  
<body>
  
    <!-- Create container -->
    <div class="container">
  
        <!-- create div with class box -->
        <div class="box">
  
            <!-- write the text to be splitted 
                 into two p tags -->
            <p class="text text1">geeksforgeeks</p>
  
            <p class="text text2">geeksforgeeks</p>
        </div>
    </div>
</body>
  
</html>

Output:

Reference: https://www.geeksforgeeks.org/how-to-split-text-horizontally-on-mouse-move-over-using-css/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!