In this post, we will show you how to double layered text effect using CSS.

1. Code:

    
    
    
    


    

        W
        E
        L
        C
        O
        M
        E
        T
        O
        S
        O
        L
        T
        U
        T
        S
    

2. Approach:

The approach is to first create two layers using the before selector and then use hover selector to rotate it on mouse hover.

HTML Code: In this section, we have wrapped each alphabet in a span with a data-title attribute having the same value as of the alphabet.

CSS Code:

• Step 1: Perform some basic styling like a background, font-family, font-size and adjusting text to center.
• Step 2: Now use before selector with the content set as the data-title used in the span tag. This will create the second layer of the text. Make sure to provide a different color from the color given to the first layer.
• Step 3: Now use some transitions to give smooth animation.
• Step 4: At last, use hover selector to change perspective or in simple words rotate the second layer.

Note: Choose your degree rotation and values for transitions carefully. You can use the browser console to get the perfect values.

Complete Code: It is the combination of the above two sections of the code.