How to Hide the Text by HTML with the Hover Effect
So, The Html-Css are the one by using you can bring the change. A lots of Design and Animations you can make through coding.
Here, I done with the Hide Text code, In which The text hide with the mouse pointer and with Animation. It also in the categories of MouseMove Operation. Just do it once and expand your knowledge with codoblog.
#CODE
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<style type="text/css">
body{
margin: 0;
padding: 0;
min-width: 100vh;
width: 100%;
display: flex;
align-items:center;
justify-content:center;
text-align: center;
font-family: sans-serif;
}
h1{
transition:0.5s;
font-size: 4em;
padding: 0;
margin: 0;
line-height: 1em;
}
h1 span{
display: block;
position: relative;
text-transform: uppercase;
transition:0.5s;
}
h1 .s1::before{
content: "";
position: absolute;
right: 0;
top: calc(50% - 10px);
width: 50%;
height: 20px;
background: #f00;
transform-origin:right;
transform-scaleX(0);
transition:0.5s;
z-index: 1;
}
h1 .s2::before{
content: "";
position: absolute;
left: 0;
top: calc(50% - 10px);
width: 50%;
height: 20px;
background: #f00;
transform-origin:left;
transform-scaleX(0);
transition:0.5s;
z-index: 1;
}
h1:hover .s1:before{
transform:scaleX(1);
}
h1:hover .s2:before{
transform:scaleX(1);
}
h1 span hide{
transition:0.5s;
transition-delay:1s;
}
h1:hover span hide{
transition-delay:1s;
color: #f00;
opacity: 0;
}
h1:hover .s1 hide{
padding-left: 25px;
}
h1:hover .s2 hide{
padding-right: 35px;
}
</style>
</head>
<body>
<h1>
<span class="s1">Do<hide>n't</hide></span>
<span class="s2"><hide>Qu</hide>it</span>
</h1>
</body>
</html>
#OUTPUT :
After Run
When Mouse Pointer ON the Text
That's the way codoblog use...😀😀😀
Do it now..
#Love CodoBlog
Comments
Post a Comment