Text Hover Effects Using Html & CSS
Hello Friends, Today in this blog you’ll learn how to create a Text Hover Effects using HTML & CSS.
[Source Codes]
You need to create Two Files: HTML File and CSS File. After creating these files just paste the following codes into your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Document</title>
</head>
<body>
<h2>
believe
<span>believe</span>
<span>believe</span>
<span>in YourSelf</span>
</h2>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
body{
background: #035df9;
}
h2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
font-size: 6em;
color: transparent;
text-transform: uppercase;
cursor: pointer;
}
h2 span:nth-child(1){
position: absolute;
top: 0;
left: 0;
color: #000;
transition: 0.5s;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
overflow: hidden;
}
h2:hover span:nth-child(1){
transform: translateY(-18px);
}
h2 span:nth-child(2){
position: absolute;
top: 0;
left: 0;
color: #000;
transition: 0.5s;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
overflow: hidden;
}
h2:hover span:nth-child(2){
transform: translateY(18px);
}
h2 span:nth-child(3){
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%) scaleY(0);
width: 91%;
color: #000;
background: #ff0;
font-size: 0.25em;
letter-spacing: 0.7em;
text-align: center;
padding-left: 20px;
margin-left: 5px;
transition: 0.5s;
}
h2:hover span:nth-child(3){
transform: translateY(-50%) scaleY(1);
}
Tags:
Glowing Effect