Double Layered Text Effect using CSS - GeeksforGeeks

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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?