Skip to content
Related Articles

Related Articles

How to Create Ghost Text Animation on Hover using HTML and CSS?

Improve Article
Save Article
  • Last Updated : 29 Jul, 2020
Improve Article
Save Article

Ghost Text Animation can be used to give your website a spooky heading or sub-heading, this effect can be easily created using some simple HTML and CSS.

HTML Code: In this section we have a ul tag which consists of some li tags displaying some text.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Ghost Text</title>
</head>
<body>
  <ul>
    <li>G</li>
    <li>H</li>
    <li>O</li>
    <li>S</li>
    <li>T</li>
  </ul>
</body>
</html>

CSS Code: In this section we design the ul element using some basic CSS properties and then in order to create the ghost animation first we will use the filter property which is used to give some visual effects to the respective element and then use the blur() function to provide a blur effect to the text, Further we will use the nth-child() Selector to provide some transmition-delay to the text.




<style>
  *{
    margin: 0;
    padding: 0;
   }
   
   ul{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
   }
   /* designing the text*/
   li{
     list-style: none;
     font-size: 3em;
     letter-spacing: 5px;
     transition: 1s;
   }
   /*creating the ghost effect*/
   li:hover{
     filter: blur(70px);
     opacity: 0;
   }
   li:nth-child(1){
     animation-delay: 0.1s;
   }
   li:nth-child(2){
     animation-delay: 0.2s;
   }
   li:nth-child(3){
     animation-delay: 0.3s;
   }
   li:nth-child(4){
     animation-delay: 0.4s;
   }
   li:nth-child(5){
     animation-delay: 0.5s;
   }
   
 </style>

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




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Ghost Text</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
   }
   
   ul{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     align-items: center;
   }
   /* designing the text*/
   li{
     list-style: none;
     font-size: 3em;
     letter-spacing: 5px;
     transition: 1s;
   }
   /*creating the ghost effect*/
   li:hover{
     filter: blur(70px);
     opacity: 0;
   }
   li:nth-child(1){
     animation-delay: 0.1s;
   }
   li:nth-child(2){
     animation-delay: 0.2s;
   }
   li:nth-child(3){
     animation-delay: 0.3s;
   }
   li:nth-child(4){
     animation-delay: 0.4s;
   }
   li:nth-child(5){
     animation-delay: 0.5s;
   }
   
 </style>
<body>
  <ul>
    <li>G</li>
    <li>H</li>
    <li>O</li>
    <li>S</li>
    <li>T</li>
  </ul>
</body>
</html>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!