<div class="unexpected-1">1. Hover me </div>
<div class="unexpected-2">2. Hover me </div>
<div class="unexpected-3">3. Hover me </div>
<div class="unexpected-4">4. Hover me </div>
<div class="unexpected-5">5. Hover me </div>
<div class="unexpected-6">6. Hover me </div>
<div class="unexpected-7">7. Hover me </div>

.unexpected-1 {
  padding: 10px;
  color:#0000;
  text-shadow: 
    0 0 0 #000,
    100vmax 0 0 #fff0;
  box-shadow: 100vmax 0 0 #0000;

  background:linear-gradient(#000 0 0) 100vmax 0 no-repeat;
  transition: 0.5s;
}
.unexpected-1:hover {
  text-shadow: 
    -100vmax 0 0 #0000,
    0 0 0 #fff;
  box-shadow: 0 0 0 #000;
  background-position: 0 0;
}
.unexpected-2 {
  padding: 10px;
  color:#0000;
  text-shadow: 
    0 0 0 #000,
    0 100vmax  0 #fff0;
  box-shadow: 0 100vmax  0 #0000;

  background:linear-gradient(#000 0 0) 0 100vmax no-repeat;
  transition: 0.5s;
}
.unexpected-2:hover {
  text-shadow: 
    0 -100vmax 0 #0000,
    0 0 0 #fff;
  box-shadow: 0 0 0 #000;
  background-position: 0 0;
}
.unexpected-3 {
  padding: 10px;
  outline: 3px solid #0000;
  outline-offset: 100vmax;
  clip-path: polygon(0 0,0 -100vmax,100% -100vmax,100% 0,calc(100% + 100vmax) 0,calc(100% + 100vmax) 100%,100% 100%,100% calc(100% + 100vmax),0% calc(100% + 100vmax),0% 100%,-100vmax 100%,-100vmax 0);
  transition: 0.5s;
}
.unexpected-3:hover {
  outline-offset: -3px;
  outline-color:#000;
}

.unexpected-4 {
  padding: 10px;
  color:#000;
  text-shadow: 
    0 0 0 #000,
    100vmax 0 0 #fff0;
  box-shadow: 100vmax 0 0 #0000;

  background:linear-gradient(#000 0 0) 100vmax 0/100% 100% no-repeat #0000;
  transition: 0.5s,background-size 0s 0.5s,background-position 0s 0.5s,text-shadow 0s 0.5s,box-shadow 0s 0.5s;
}
.unexpected-4:hover {
  color:#0000;
  text-shadow: 
    -100vmax 0 0 #0000,
    0 0 0 #fff;
  box-shadow: 0 0 0 #000;
  background-position: 0 0;
  background-size: 0% 0%;
  background-color:#000;
  transition: 0.5s,background-size 0s 0.5s,background-color 0s 0.5s,color 0s 0s;
}
div.unexpected-5 {
  padding: 10px;
  margin-bottom:40px;
  color:#0000;
  text-shadow: 
    0 0 0 #000,
    0 70px  0 #fff;
  box-shadow: 0 70px  0 #000;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(#000 0 0) 0 70px no-repeat;
  transition: 0.4s,clip-path 0.4s 0.4s;
}
.unexpected-5:hover {
  text-shadow: 
    0 0 0 #0000,
    0 0 0 #fff;
  box-shadow: 0 0 0 #000;
  background-position: 0 0;
  clip-path: polygon(0 0,100% 0,100% calc(100% + 70px),0 calc(100% + 70px));
  transition: 0.4s 0.4s,clip-path 0.4s;
}

div.unexpected-6 {
  padding: 10px;
  margin-bottom:40px;
  color:#0000;
  text-shadow: 
    0 0 0 #000,
    0 70px  0 #fff;
  box-shadow: 0 70px  0 #000;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(#000 0 0) 0 70px no-repeat;
  transition: 0.4s,clip-path 0s;
}
.unexpected-6:hover {
  text-shadow: 
    0 -70px 0 #000,
    0 0 0 #fff;
  box-shadow: 0 0 0 #000;
  background-position: 0 0;
  clip-path: polygon(0 0,100% 0,100% calc(100% + 70px),0 calc(100% + 70px));
  transition: 0.4s 0.4s,clip-path 0.4s;
}

.unexpected-7 {
  padding: 10px;
  box-shadow: 0 0 0 200vmax #0000;
  clip-path: polygon(1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) 100%,calc(100% + 100vmax) 100%,calc(100% + 100vmax) calc(100% + 3px),-100vmax calc(100% + 3px),-100vmax 100%,1px 100%);
  transition: 0.5s;
}
.unexpected-7:hover {
  box-shadow: 0 0 0 200vmax #000;
} 

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}