OTHER STUFF

by Petra1999

HTML

<div id="one">

  <a href="#">a link</a><br>
  <a href="#">another</a>

</div>

<div id="two">

  <a href="#">a link</a><br>
  <a href="#">another</a>

</div>

<br><br>




<div style="color:black;">

<div style="background-color:rgba(0,0,0,1)">black</div>
<div style="background-color:rgba(0,0,0,0.9)">text 9</div>
<div style="background-color:rgba(0,0,0,0.8)">text</div>
<div style="background-color:rgba(0,0,0,0.7)">text</div>
<div style="background-color:rgba(0,0,0,0.6)">text</div>
<div style="background-color:rgba(0,0,0,0.5)">text 5</div>
<div style="background-color:rgba(0,0,0,0.4)">text</div>
<div style="background-color:rgba(0,0,0,0.3)">text</div>
<div style="background-color:rgba(0,0,0,0.2)">text 2</div>

<div style="background-color:rgba(0,0,0,0.15)">text 1.5</div>
<div style="background-color:rgba(0,0,0,0.1)">text 1</div>

<div style="background-color:rgba(0,0,0,0.075)">text</div>
<div style="background-color:rgba(0,0,0,0.05)">text</div>
<div style="background-color:rgba(0,0,0,0.025)">text</div>
<div style="background-color:rgba(0,0,0,0.01)">text</div>

</div>

CSS

#one a,
#one a:hover {
  position: relative;
  text-decoration: none;
  color: black;
  margin-left:20px;
  letter-spacing:0;
  
  transition:letter-spacing 0.5s ease-in-out 0s;
}

#one a:hover{
  letter-spacing:0.25px;
  cursor:help;
}

#one a:before {
  position: absolute;
  background: rgba(162, 230, 242, 1);
  width: 100%;
  height: 20%;
  bottom:10%;
  left:-5px;
  padding-right:10px;
  z-index: -1;
  content: "";

  transition: all 0.5s ease-in-out 0.1s,
              bottom 0.4s ease-in-out 0.05s;    
}

#one a:hover:before{
  background:rgba(162, 230, 242, 0.5);
  height:35%;
  bottom:25%;
}







#two a {
  position: relative;
}

#two a:before {
  position: absolute;
  
  width: 100%;
  
  left:-5px;
  padding-right:10px;
  z-index: -1;
  content: "";

  transition: all 0.5s ease-in-out 0.1s,
              bottom 0.4s ease-in-out 0.05s;   
              
              
                background:rgba(162, 230, 242, 0.5);
  height:35%;
  bottom:25%;
}

#two a:hover:before{
height: 20%;
  bottom:10%;background: rgba(162, 230, 242, 1);
}



  /*
   
  -webkit-transition: all 0.5s ease-in-out 0.1s;
     -moz-transition: all 0.5s ease-in-out 0.1s;
      -ms-transition: all 0.5s ease-in-out 0.1s;
       -o-transition: all 0.5s ease-in-out 0.1s;*/
       
       
       
body {
  font-size:30px;
}