<a href="#" class="badge">
  <div class="images">
    <img src="https://unsplash.it/300/300?image=837&gravity=center" class="image">
    <img src="https://unsplash.it/g/300/300?image=837&gravity=center" class="image">
  </div>
  <span class="title" data-text="True Story">True Story</span>
</a>

@mixin imgGlitch($name, $intensity, $width, $height, $top, $left) {
  
  $steps: $intensity;
  
  // Ensure the @keyframes are generated at the root level
  @at-root {
    // We need two different ones
    @for $i from 1 through 2 {
      @keyframes #{$name}-anim-#{$i} {
        @for $i from 0 through $steps {
          #{percentage($i*(1/$steps))} {
            clip: rect(
              random($height)+px,
              $width+px,
              random($height)+px,
              0
            );
          }
        }
      }
    }
  }
  
  > img {
    position: absolute;
    top: $top+px;
    left: $left+px;
    width:100%;
    height:100%;
  }
  > img:nth-child(2),
  > img:nth-child(3){
    clip: rect(0, 0, 0, 0); 
  }
  > img:nth-child(2) {
    left: ($left + 2) + px;
    animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
  }
  > img:nth-child(3) {
    left: ($left - 2) + px;
    animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
  }
}

.badge {
  display:block;
  width:150px;
  height:150px;
  background:#F8E71C;
  border-radius:50%;
  text-decoration:none;
  font-weight:bold;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(8deg);
  overflow:hidden;
  
  .title {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    font-size:22px;
    color:#000;
    transition: color 0.2s ease;
    
    &:after{
      content:attr(data-text);
      position:absolute;
      left:2px;
      text-shadow:-1px 0 red;
      top:0;
      color:black;
      //background:black;
      overflow:hidden;
      clip:rect(0,900px,0,0); 
      //animation:noise-anim 2s infinite linear alternate-reverse;
    }

    @keyframes noise-anim-2{
      $steps:20;
      @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
          clip:rect(random(100)+px,9999px,random(100)+px,0);
        }
      }
    }
    
    &:before{
      content:attr(data-text);
      position:absolute;
      left:-2px;
      text-shadow:1px 0 blue; 
      top:0;
      color:#fff;
      //background:black;
      overflow:hidden;
      clip:rect(0,900px,0,0); 
    }
  }
  
  .images {
    width:100%;
    height:100%;
    opacity:0;
    transition: all 0.3s ease;
    @include imgGlitch("image-glitch", 15, 150, 150, 0, 0);
  }
  
  &:hover {
     .title {
       color:#fff;
       @keyframes noise-anim {
      $steps:20;
      @for $i from 0 through $steps{
        #{percentage($i*(1/$steps))}{
          clip:rect(random(100)+px,9999px,random(100)+px,0);
        }
      }
    }
       
       &:before{
        animation:noise-anim-2 3s infinite linear alternate-reverse;
       }
     }
    
    .images {
      opacity:1;
    }
  }
}