Mouse over effect IV

  Code display

<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>

<style>
.inverted-1 {
  background:
    linear-gradient(black 50%, #fff 0) 0 var(--_d, 0) /100% 200% no-repeat,
    linear-gradient(#0000 50%, #000 0) 0 var(--_d, 0) /100% 200% no-repeat;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transitio