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

.inverted-1 {
  padding: 10px;
  color: #fff;
  font-weight: bold;
  filter: invert(1);
}
.inverted-1:before {
  content: "";
  position: absolute;
  inset: 10% 5%;
  background: #fff;
  transform: rotate(450deg) scale(0);
  transition: .4s;
  mix-blend-mode: difference;
}
.inverted-1:hover:before {
  transform: rotate(20deg) scale(1);
}


.inverted-2 {
  padding: 10px; 
  color: #fff;
  font-weight: bold;
  filter: invert(1);
}
.inverted-2:before,
.inverted-2:after {
  content: "";
  position: absolute;
  inset: -10% 35%;
  transform-origin: top;
  background: #fff;
  transition: .4s;
  mix-blend-mode: difference;
}
.inverted-2:hover:before {
  transform: skew(45deg);
}
.inverted-2:hover:after {
  transform: skew(-45deg);
}


.inverted-3 {
  padding: 10px; 
  font-weight: bold;
  color: #fff;
  filter: invert(1);
}
.inverted-3:before,
.inverted-3:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transform:scale(var(--s,1)) translateY(-150%);
  clip-path: polygon(0 0,100% 0,100% 33%,50% 80%,0 33%);
  transition: .4s;
  mix-blend-mode: difference;
}

.inverted-3:after {
  --s: -1;
}
.inverted-3:hover:before,
.inverted-3:hover:after {
  transform:scale(var(--s,1)) translateY(0);
  opacity: 1;
}



.inverted-4 {
  padding: 10px; 
  color: #fff;
  font-weight: bold;
  filter: invert(1);
}
.inverted-4:before,
.inverted-4:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transform:scale(var(--s,1)) translateY(-150%);
  clip-path: polygon(0 0,100% 0,100% 50%,50% 100%,0 50%);
  transition: .3s;
  mix-blend-mode: difference;
}

.inverted-4:after {
  --s: -1;
  clip-path: inset(0 0 50% 0);
  transition-delay: .3s;
}
.inverted-4:hover:before,
.inverted-4:hover:after {
  transform:scale(var(--s,1)) translateY(0);
  opacity: 1;
}



.inverted-5 {
  padding: 10px; 
  color: #fff;
  font-weight: bold;
  filter: invert(1);
}
.inverted-5:before{
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: #fff;
  opacity: 0;
  transform:translateY(-200%);
  transition: .3s,transform .4s cubic-bezier(0,1,0.7,2);
  mix-blend-mode: difference;
}

.inverted-5:hover:before{
  transform:translateY(0);
  opacity: 1;
}


.inverted-6 {
  padding: 10px; 
  color: #fff;
  font-weight: bold;
  filter: invert(1);
}
.inverted-6:before,
.inverted-6:after{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  clip-path: inset(0 50% 0 0);
  transform-origin: bottom;
  transition: .3s,transform .4s .3s;
  mix-blend-mode: difference;
}
.inverted-6:after{
  clip-path: inset(0 0 0 50%);
}

.inverted-6:hover:before{
  transform:rotate(-20deg);
  opacity: 1;
}
.inverted-6:hover:after{
  transform:rotate(20deg);
  opacity: 1;
}



.inverted-7 {
  padding: 10px; 
  color: #fff;
  font-weight: bold;
  filter: invert(1);
}
.inverted-7:before,
.inverted-7:after{
  content: "";
  position: absolute;
  inset: 10% 0;
  background: #fff;
  opacity: 0;
  clip-path: inset(0 40% 0 0);
  transform-origin: left;
  transform: rotate(60deg);
  transition: .4s;
  mix-blend-mode: difference;
}
.inverted-7:after{
  clip-path: inset(0 0 0 40%);
  transform-origin: right;
}

.inverted-7:hover:before,
.inverted-7:hover:after{
  transform:rotate(5deg);
  opacity: 1;
}

  
/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}

body {
  text-align:center;
  overflow:hidden;
}