JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<h3 class="hover">Hover Me</h3>
<h3 class="hover2">Hover Me</h3>
<h3 class="hover3">Hover Me</h3>

CSS

/* https://css-tricks.com/css-hover-effects-background-masks-3d/ */

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
}

h3 {
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  margin: auto;
  cursor: pointer;
  padding: 0.1em 0.1em;
}

.hover {
  --c: black;
  /* the color */

  color: #0000;
  background:
    linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%))/200% 100%,
    linear-gradient(var(--c) 0 0) 0% 100%/var(--_p, 0%) 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  transition: 0.5s;
}

.hover:hover {
  --_p: 100%;
}

.hover2 {
  color: #0000;
  background:
    linear-gradient(90deg, #000 50%, #fff 0),
    linear-gradient(-90deg, #000 50%, #fff 0),
    linear-gradient(90deg, #0000 50%, #000 0),
    linear-gradient(-90deg, #0000 50%, #000 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;
}

.hover2:hover {
  background-position: top right, bottom left;
}

.hover3 {
  color: #0000;
  background:
    linear-gradient(-45deg, #000 40%, #fff 0 60%, #000 0) right/300% 100% no-repeat,
    linear-gradient(-45deg, #0000 40%, #000 0 60%, #0000 0) right/300% 100% no-repeat;
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
}

.hover3:hover {
  background-position: left;
  transition: 0.8s;
}