How to Create Ghost Text Animation on Hover using HTML and CSS? Last Updated : 26 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. html <!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. css <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. css <!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: Comment More infoAdvertise with us Next Article How to Create Jumping Text 3D Animation Effect using CSS ? L lakshgoel204 Follow Improve Article Tags : CSS CSS-Misc Similar Reads How to Create Loading Blur Text Animation Effect using HTML and CSS? The blur text animation is known as the Smoky effect and is used to give the text a blurry animation. The text blurs linearly in one direction and then reappears. In this article, we will create a loading blur text animation effect using HTML and CSS.Approach: The approach to create loading blur tex 3 min read How to Create Jumping Text 3D Animation Effect using CSS ? In this article, you will learn to implement Jumping Texts animation effect using simple HTML and CSS. HTML is used to create the structure of the page and CSS is used to set the styling. HTML Code: In this section, we will design the basic structure of the body. html <!DOCTYPE html> <html 4 min read How to create text-fill animation using CSS ? A text-fill animation using CSS is a visual effect where the content of text gradually fills with a color, gradient, or pattern over time. This animation can create dynamic, eye-catching effects for headings or titles by adjusting properties like background-size, clip-path, or keyframe animations.Ap 2 min read How to create button hover animation effect using CSS ? Minimal rotating backdrop button hovers and click animation is a basic CSS animation effect where when the button hovers, the button's background color changes, and when the button is clicked, it scales down slightly. This animation is implemented using CSS pseudo-elements and transitions. The ::sel 3 min read How to Rotate a Text 360 Degrees on hover using HTML and CSS? Rotating text 360 degrees on hover is a visual effect that makes text spin around its center point when the user hovers their cursor over it. To rotate text 360 degrees on hover using HTML and CSS, you can apply a CSS animation to the text element.Rotate A Text 360 Degrees On HoverThe text is center 2 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read Like