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;
}
li{
list-style: none;
font-size: 3em;
letter-spacing: 5px;
transition: 1s;
}
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;
}
li{
list-style: none;
font-size: 3em;
letter-spacing: 5px;
transition: 1s;
}
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...