Awesome Text Hover Effect Part 1

Published: 13 January 2022
on channel: Masters In Web Design

How to make this type of awesome cool text hover effect in CSS

/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #F1F1F1;
width: 100%;
min-height: 100vh;
display: grid;
place-items: center;
}
nav.nav{
background: #FFF;
box-shadow: 0 0 16px #D1D1D1;
}
nav.nav ul{
list-style: none;
}
nav.nav ul li{
display: inline-block;
border-right: 1px solid #F1F1F1;
}
nav.nav ul li a{
display: inline-block;
font-family: sans-serif;
font-size: 4rem;
padding: 16px;
text-decoration: none;
color: transparent;
font-weight: 900;
-webkit-text-stroke: 2px #2cdef5;
position: relative;
}
nav.nav ul li:nth-child(1) a::before{
content: attr(data-hover);
position: absolute;
transform: scale(1.4) translate(60px, 60px) rotate(10deg);
color: #2cdef5;
opacity: 0;
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
nav.nav ul li:nth-child(1) a:hover::before{
opacity: 1;
transform: scale(1.0) translate(0, 0) rotate(0);
}
nav.nav ul li:nth-child(2) a{
text-shadow: 50px 0 transparent;
transition: text-shadow 0.4s ease-in-out;
}
nav.nav ul li:nth-child(2) a:hover{
text-shadow: 0 0 0 #2cdef5;
}
nav.nav ul li:nth-child(3) a{
text-shadow: 0 50px transparent;
transition: text-shadow 0.4s ease-in-out;
}
nav.nav ul li:nth-child(3) a:hover{
text-shadow: 0 0 0 #2cdef5;
}

Watch video Awesome Text Hover Effect Part 1 online without registration, duration hours minute second in high quality. This video was added by user Masters In Web Design 13 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 21 once and liked it 2 people.

215