Skip to main content

Hide Animation with Hover

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





Labels:

Comments

Post a Comment

The Most Populer

POP UP | ALERT MESSAGE

 || POP UP MESSAGE BOX || ALERT  MESSAGE BOX || CODE BY CODOBLOG || codoblog giving the code for designing the code for POP UP message Box. This box also helpfull for giving the message of alerting also. Design it and use properly in your websites. This pop up message is so helpful for the alerting users during interacting with our web. So, try to do the code for it, and keep connected with the codoblog.   #CODE -         <!DOCTYPE html> <html> <head>   <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title> Pop up</title>     <link rel="stylesheet">     <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>     <style type="text/css">     h3{     font-family: lucida Handwriting;     text-ali...
Post a Comment
Read more