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

Labels:

Comments

Post a Comment

The Most Populer

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more

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