Skip to content
Related Articles

Related Articles

How to Create Ghost Text Animation on Hover using HTML and CSS?
  • Last Updated : 29 Jul, 2020

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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :