<div class="fading-1">1. Hover me </div>
<div class="fading-2">2. Hover me </div>
<div class="fading-3">3. Hover me </div>
<div class="fading-4">4. Hover me </div>
<div class="fading-5">5. Hover me </div>
<div class="fading-6">6. Hover me </div>
<div class="fading-7">7. Hover me </div>

.fading-1 {
  background: 
     linear-gradient(90deg, transparent, black, transparent) 
    bottom /var(--d, 0) 3px no-repeat;
  transition: 0.5s;
}
.fading-1:hover {
  --d: 100%;
}

.fading-2 {
  background: 
     linear-gradient(transparent, black) 
     bottom /100% var(--d, 0) no-repeat;
  transition: 0.5s;
}
.fading-2:hover {
  --d: 12px;
}

.fading-3 {
  background: 
      linear-gradient(-45deg, transparent calc(100%/3), rgba(0, 0, 0, 0.5), transparent calc(200%/3)) 
      bottom right/350% 100% no-repeat;
  transition: 0.5s linear;
}
.fading-3:hover {
  background-position: bottom left;
}

.fading-4 {
  background: 
     radial-gradient(transparent 50%, rgba(0, 0, 0, 0.5)) 
     center/200% 200% no-repeat;
  transition: 0.5s ;
}
.fading-4:hover {
  background-size: 100% 100%;
}

.fading-5 {
  background: 
     linear-gradient(-45deg, transparent calc(100%/3), rgba(0, 0, 0, 0.5), transparent calc(200%/3)) 
     bottom right/350% 100% no-repeat;
  transition: 0.5s linear, background-size 0s 0.5s;
}
.fading-5:hover {
  background-position: bottom left;
  background-size: 0 0;
}

.fading-6 {
  background: 
     linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 30% 70%, rgba(0, 0, 0, 0.5)) 
     center/300% 100% no-repeat;
  transition: 0.5s;
}
.fading-6:hover {
  background-size: 100% 100%;
}

.fading-7 {
  background:
    radial-gradient(farthest-side at bottom, black, transparent) 
    bottom/calc(2*var(--d, 0%)) var(--d, 0) no-repeat;
  transition: 0.5s;
}
.fading-7:hover {
  --d: 50%;
}

/**/
div[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  padding:8px;
  cursor:pointer;
}
body {
  text-align:center;
}