JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inverted-1">1. Hover me </div>

CSS

.inverted-1 {
  background:linear-gradient(black 50%, #fff 0) 0 var(--d, 0) /100% 200% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: 0.8s;
  position:relative;
}
.inverted-1::before {
  content:"";
  position:absolute;
  inset:0;
  transition: 0.8s;
  z-index:-1;
  background:linear-gradient(transparent 50%, black 0) 0 var(--d, 0) /100% 200% no-repeat;
}
.inverted-1:hover {
  --d: 50%;
}


/**/
div[class] {
  color: transparent;
  font-weight: bold;
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  padding:8px;
  cursor:pointer;
}

body {
  text-align:center;
}