Double Layered Text Effect using CSS

Last Updated : 18 Jun, 2020

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.

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <title>Double Layered Text</title> 
<body> 
    <div class="geeks"> 
      <span data-title="G">G</span> 
      <span data-title="E">E</span> 
      <span data-title="E">E</span> 
      <span data-title="K">K</span> 
      <span data-title="S">S</span> 
      <span data-title="F">F</span> 
      <span data-title="O">O</span> 
      <span data-title="R">R</span> 
      <span data-title="G">G</span> 
      <span data-title="E">E</span> 
      <span data-title="E">E</span> 
      <span data-title="K">K</span> 
      <span data-title="S">S</span> 
    </div> 
</body> 
  
</html> 

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.

<style> 
    body { 
        background: black; 
    } 
  
    .geeks { 
        text-align: center; 
        margin: 200px auto 0; 
        font-family: Arial, Helvetica, sans-serif; 
  
    } 
  
    .geeks span { 
        font-size: 80px; 
        font-weight: 700; 
        color: green; 
        position: relative; 
        text-shadow: -1px 0 0 rgba(0, 0, 0, .2); 
    } 
  
    .geeks span::before { 
        content: attr(data-title); 
        position: absolute; 
        top: 0; 
        left: 0; 
        transform-origin: left; 
        color: #fff; 
        transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        transform: rotateY(25deg); 
    } 
  
    .geeks span:hover::before { 
        transform: perspective(1000px) rotate(-67deg); 
    } 
</style> 

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

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <title>Double Layered Text</title> 
  
    <style> 
        body { 
            background: black; 
        } 
  
        .geeks { 
            text-align: center; 
            margin: 200px auto 0; 
            font-family: Arial, Helvetica, sans-serif; 
        } 
  
        .geeks span { 
            font-size: 80px; 
            font-weight: 700; 
            color: green; 
            position: relative; 
            text-shadow: -1px 0 0 rgba(0, 0, 0, .2); 
        } 
  
        .geeks span::before { 
            content: attr(data-title); 
            position: absolute; 
            top: 0; 
            left: 0; 
            transform-origin: left; 
            color: #fff; 
            transition: .5s cubic-bezier( 
                0.175, 0.885, 0.32, 1.275); 
            transform: rotateY(25deg); 
        } 
  
        .geeks span:hover::before { 
            transform: perspective(1000px) rotate(-67deg); 
        } 
    </style> 
</head> 
  
<body> 
    <div class="geeks"> 
        <span data-title="G">G</span> 
        <span data-title="E">E</span> 
        <span data-title="E">E</span> 
        <span data-title="K">K</span> 
        <span data-title="S">S</span> 
        <span data-title="F">F</span> 
        <span data-title="O">O</span> 
        <span data-title="R">R</span> 
        <span data-title="G">G</span> 
        <span data-title="E">E</span> 
        <span data-title="E">E</span> 
        <span data-title="K">K</span> 
        <span data-title="S">S</span> 
    </div> 
</body> 
  
</html> 