<div class="inverted-1">1. Hover me </div>
<div class="inverted-2">2. Hover me </div>
<div class="inverted-3">3. Hover me </div>
<div class="inverted-4">4. Hover me </div>
<div class="inverted-5">5. Hover me </div>
<div class="inverted-6">6. Hover me </div>
<div class="inverted-7">7. Hover me </div>
<div class="inverted-8">8. Hover me </div>
.inverted-1 {
  background:
    linear-gradient(black 50%, #fff 0) 0 var(--d, 0) /100% 200% no-repeat,
    linear-gradient(transparent 50%, black 0) 0 var(--d, 0) /100% 200% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.8s
}
.inverted-1:hover {
  --d: 50%;
}

.inverted-2 {
  background:
    linear-gradient(90deg, black 50%, #fff 0),
    linear-gradient(-90deg, black 50%, #fff 0),
    linear-gradient(90deg, transparent 50%, black 0),
    linear-gradient(-90deg, transparent 50%, black 0);
  background-repeat: no-repeat;
  background-size: 200% 51%;
  background-position: top left, bottom right;
  -webkit-background-clip: text, text, padding-box, padding-box;
  background-clip: text, text, padding-box, padding-box;
  transition: 0.8s
}

.inverted-2:hover {
  background-position: top right, bottom left;
}
.inverted-3 {
  background:
    linear-gradient(-135deg, black 50%, #fff 0) var(--d, 100%) 0/250% 100% no-repeat,
    linear-gradient(-135deg, transparent 50%, black 0) var(--d, 100%) 0/250% 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.8s
}

.inverted-3:hover {
  --d: 50%;
}

.inverted-4 {
  background:
    linear-gradient(to bottom right, black 50%, #fff 50.1%) left/300% 300% no-repeat,
    linear-gradient(to bottom right, transparent 50%, black 50.1%) left/300% 300% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.8s
}
.inverted-4:hover {
  background-position: center;
}

.inverted-5 {
  background:
    linear-gradient(black 0 0) right/100% 100% no-repeat,
    linear-gradient(black, 40%, #fff 0 60%, black 0) left/0% 100% no-repeat,
    linear-gradient(transparent 40%, black 0 60%, transparent 0) left/0% 100% no-repeat;
  -webkit-background-clip: text, text, padding-box;
  background-clip: text, text, padding-box;
  transition: 0.8s
}
.inverted-5:hover {
  background-size: 0% 100%, 100% 100%, 100% 100%;
}

.inverted-6 {
  background:
    linear-gradient(white 80%, black 0) calc(0*100%/3) var(--d, 100%),
    linear-gradient(black 80%, transparent 0) calc(0*100%/3) var(--d, 100%),
    linear-gradient(white 60%, black 0) calc(1*100%/3) var(--d, 100%),
    linear-gradient(black 60%, transparent 0) calc(1*100%/3) var(--d, 100%),
    linear-gradient(white 40%, black 0) calc(2*100%/3) var(--d, 100%),
    linear-gradient(black 40%, transparent 0) calc(2*100%/3) var(--d, 100%),
    linear-gradient(white 20%, black 0) calc(3*100%/3) var(--d, 100%),
    linear-gradient(black 20%, transparent 0) calc(3*100%/3) var(--d, 100%);
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  background-size: calc(100%/4) 500%;
  background-repeat: no-repeat;
  transition: 0.8s
}
.inverted-6:hover {
  --d: 0%;
}

.inverted-7 {
  background:
    linear-gradient(-45deg, black 40%, #fff 0 60%, black 0) right/300% 100% no-repeat,
    linear-gradient(-45deg, transparent 40%, black 0 60%, transparent 0) right/300% 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.8s
}
.inverted-7:hover {
  background-position: left;
}

.inverted-8 {
  background:
    linear-gradient(-45deg, black 40%, #fff 0 60%, black 0) right/300% 100% no-repeat,
    linear-gradient(-45deg, transparent 40%, black 0 60%, transparent 0) right/300% 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
}
.inverted-8:hover {
  background-position: left;
  transition: 0.8s
}


/**/
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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.