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

.abstract-1 {
  padding: 10px;
  position: relative;
  z-index: 0;
  mix-blend-mode: darken;
  transition: .2s;
}
.abstract-1:hover {
  color: #fff;
}
.abstract-1:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px -5px;
  padding: 6px;
  opacity: 0;
  background: 
    repeating-linear-gradient(90deg,#000  0 20px,#0000 0 40px),
    repeating-linear-gradient(90deg,#0000 0 20px,#000  0 40px),
    #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 80%;
  background-origin: content-box,content-box,padding-box;
  background-clip: content-box,content-box,padding-box;
  filter: blur(6px) contrast(30);
  transition: .2s,opacity .3s;
}
.abstract-1:hover:before {
  background-position: top, bottom;
  opacity: 1;
  transition: .4s,opacity .2s;
}


.abstract-2 {
  padding: 10px;
  position: relative;
  z-index: 0;
  mix-blend-mode: darken;
  transition: .2s;
}
.abstract-2:hover {
  color: #fff;
}
.abstract-2:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px -30px;
  padding: 6px;
  background: 
    repeating-conic-gradient(#000 0 20deg,#0000 0 40deg),
    linear-gradient(#000 0 0),
    #fff;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  background-size: 80% 80%;
  background-origin: content-box,content-box,padding-box;
  background-clip: content-box,content-box,padding-box;
  filter: blur(6px) contrast(30);
  transition: .2s,opacity .3s;
}
.abstract-2:hover:before {
  background-size: 100% 100%,80% 80%;
  opacity: 1;
  transition: .4s,opacity .2s;
}


.abstract-3 {
  padding: 10px;
  position: relative;
  z-index: 0;
  mix-blend-mode: darken;
  transition: .2s;
}
.abstract-3:hover {
  color: #fff;
}
.abstract-3:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px -30px;
  padding: 6px;
  background: 
    repeating-conic-gradient(#000 0 18deg,#0000 0 30deg),
    linear-gradient(#000 0 0),
    #fff;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  background-size: 80% 80%;
  background-origin: content-box,content-box,padding-box;
  background-clip: content-box,content-box,padding-box;
  filter: blur(6px) contrast(30);
  transition: .2s,opacity .3s;
}
.abstract-3:hover:before {
  background-size: 100% 100%,80% 75%;
  opacity: 1;
  transition: .4s,opacity .2s;
}


.abstract-4 {
  padding: 10px;
  position: relative;
  z-index: 0;
  mix-blend-mode: darken;
  transition: .2s;
}
.abstract-4:hover {
  color: #fff;
}
.abstract-4:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px -30px;
  padding: 6px;
  background: 
    repeating-conic-gradient(#000 0 10deg,#0000 0 20deg),
    linear-gradient(#000 0 0),
    #fff;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  background-size: 80% 80%;
  background-origin: content-box,content-box,padding-box;
  background-clip: content-box,content-box,padding-box;
  filter: blur(6px) contrast(30);
  transition: .2s,opacity .3s;
}
.abstract-4:hover:before {
  background-size: 100% 100%,85% 50%;
  opacity: 1;
  transition: .4s,opacity .2s;
}


.abstract-5 {
  padding: 10px;
  position: relative;
  z-index: 0;
  mix-blend-mode: darken;
  transition: .2s;
}
.abstract-5:hover {
  color: #fff;
}
.abstract-5:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px -30px;
  padding: 6px;
  background: 
    repeating-conic-gradient(#000 0 30deg,#0000 0 55deg),
    linear-gradient(#000 0 0),
    #fff;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  background-size: 80% 80%;
  background-origin: content-box,content-box,padding-box;
  background-clip: content-box,content-box,padding-box;
  filter: blur(6px) contrast(30);
  transition: .2s,opacity .3s;
}
.abstract-5:hover:before {
  background-size: 100% 100%,85% 50%;
  opacity: 1;
  transition: .4s,opacity .2s;
}

.abstract-6 {
  padding: 10px;
  position: relative;
  z-index: 0;
  mix-blend-mode: darken;
  transition: .2s;
}
.abstract-6:hover {
  color: #fff;
}
.abstract-6:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px -30px;
  padding: 6px;
  background: 
    repeating-conic-gradient(#000 0 30deg,#0000 0 50deg),
    repeating-conic-gradient(#000 0 30deg,#0000 0 50deg),
    linear-gradient(#000 0 0) ,
    #fff;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  background-size: 40% 40%,40% 40%,80% 80%;
  background-origin: content-box,content-box,content-box,padding-box;
  background-clip: content-box,content-box,content-box,padding-box;
  filter: blur(6px) contrast(30);
  transition: .2s,opacity .3s;
}
.abstract-6:hover:before {
  background-size: 50% 100%,50% 100%,85% 50%;
  background-position:left,right,center ;
  opacity: 1;
  transition: .4s,opacity .2s;
}  

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