In this article, we will see how we can create a text split effect using CSS. The text split effect using CSS involves wrapping each word in a <p>and <span> element and animating the transform property to scale the words from 0 to 1 width, creating a captivating split effect.
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 the 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 the transform property on hover to translate it.
Example: In this example, we will use the above-explained approach.
HTML
<!DOCTYPE html><html>
<head>
<style type="text/css">
/* Aligning 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/amp/