CSS Text Cut Effect On Hover | Divide Text And Reveal Another

How we can cut a text from the middle using HTML & CSS? Solution: CSS Text Cut Effect On Hover, Divide Text From Middle And Reveal Another.

Yesterday I saw text cutting effect on hover on a website, When I did hover on phone number field and the “phone number” text cut from the middle and actual number reveals. Then I started thinking about how I can create that cool effect. Finally, I did my work.

So today I am sharing CSS Text Cut Effect On Hover program. In other words, Divide text and reveal another text on hover. This is a pure CSS cutting text program, no javascript or any library. Also, it has a little sword effect, when cutting text. In this case, I take a text “secret” when I hover on text, the text divide in two parts from the middle. One section of the text goes left and one goes right, The the second text appears.

This is the power of CSS3, You don’t have an idea of what you can do only with CSS. This program is nothing at all, Expert developers create unbelievable things with CSS. But if you a beginner, then you can understand is program easily because that is not a hard one. You can use this on your website at special section like about intro, portfolio, etc.

If you don’t get what is the program I am talking about, Then see the preview given below.

Preview Of Divide Text And Reveal Another Program

See this video preview to getting an idea of how this program looks like.

Now you can see this program visually. If you like this, then get the source code of its.

You May Also Like:

• HTML CSS Day & Night Mode
• CSS Neon Text Effect
• Form Validation In Pure HTML CSS
• CSS Image Gallery With 3D Effect

CSS Text Cut Effect On Hover Source Code

As always before sharing source code, Let’s talk about this program. As you know this is a Pure CSS Text Cut Effect, Text divide into parts on hover and another text appear. For creating this program I used CSS clip (get info) property. And I gave the text position: absolute; property, because The clip property applies only to absolutely positioned elements. & I used @keyframe for creating the sword effect for cutting text.

For creating this program you have to create only 2 files. One for HTML and one for CSS. Follow the steps to create this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these files.

That’s It. Now you have successfully created a CSS Text Cut Effect On Hover and Divide Text And Reveal Another. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.