Cool Text Hover Effect in CSS part 5

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

Cool text hover effect in CSS

/*CSS*/
*,*::before,*::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
width: 100%;
min-height: 100vh;
background: radial-gradient(#D9D9D9, #FFF);
display: grid;
place-items: center;
}
.container{
width: 580px;
height: calc( 100% - 10em );
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.container .hover{
display: inline-block;
height: 100%;
position: relative;
}
.container .hover span:nth-child(1){
position: absolute;
top: 0;
bottom: 50%;
width: 100%;
}
.container .hover span:nth-child(2){
position: absolute;
top: 50%;
bottom: 0%;
width: 100%;
}
.container .hover span:nth-child(3){
display: block;
height: 100%;
font-size: 5rem;
color: #FFF;
text-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
line-height: 10;
font-weight: 900;
margin-top: 0;
transition: margin-top 0.4s ease;
}
.container .hover span:nth-child(1):hover~span{
margin-top: 40px;
}
.container .hover span:nth-child(2):hover~span{
margin-top: -40px;
}

Watch video Cool Text Hover Effect in CSS part 5 online, duration hours minute second in high quality that is uploaded to the channel Masters In Web Design 17 January 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 21 times and liked it 2 visitors.

653