Double Layered Text Effect using CSS
The double-layered text effect feature is very new in the world of text-animation targeting animated websites and its users as the audience. The feature basically has two layers for every word and the upper layer can be manipulated by various events such as hover events. The rotation of the upper layer is performed at some certain angle to make a hinge kind of effect. It will look like the upper layer is hinged to the lower layer from a single point.
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.
- 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.
Please Login to comment...