* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #000;
}

#video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

#box {
  position: fixed;
  display: block;
  width:600px;
  height:300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(assets/avatar.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color:rgba(0,0,0,0.5);
  border-radius: 10px;
}

#box:before
  {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(assets/avatar.png);
    background-size: contain; /* contain for split effect */
    background-repeat: no-repeat;
    opacity: .25;
    mix-blend-mode: hard-light;
    animation: glitch2 0.25s linear infinite;
  }

#box:hover:before
{
  animation: glitch1 1s linear infinite;
}

@keyframes glitch1
{
  0%
  {
    background-position: 0 0;
  }
  10%
  {
    background-position: 5px 0;
  }
  20%
  {
    background-position: -5px 0;
  }
  30%
  {
    background-position: 15px 0;
  }
  40%
  {
    background-position: -5px 0;
  }
  50%
  {
    background-position: -25px 0;
  }
  60%
  {
    background-position: -50px 0;
  }
  70%
  {
    background-position: 0 -20px;
  }
  80%
  {
    background-position: -60px -20px;
  }
  81%
  {
    background-position: -100 0;
  }
  100%
  {
    background-position: -100 0;
  }
}

@keyframes glitch2
{
  0%
  {
    background-position: 0 0;
  }
  15%
  {
    background-position: 15px 0;
    transform: skew(2deg, 2deg);
  }
  30%
  {
    background-position: 15px 0;
    transform: skew(-5deg, -5deg);
  }  
  50%
  {
    background-position: -15px 0;
  }
  65%
  {
    background-position: 15px 0;
    transform: skew(15deg, 15deg);
  }

  85%
  {
    background-position: 0 0;
    transform: skew(-2deg, -2deg);
  }
  100%
  {
    background-position: 0 0;
    transform: skew(0deg, 0deg);
  }
}