CSS Glitch Effect | Pure CSS Animation

byCodingFlicks -October 18, 2020

0

Hi there, welcome. In this blog, I will share another simple snippet based on creating a simple image glitch effect using HTML and CSS. I have used CSS keyframes animation to make this snippet. I applied animation for CSS pseudo-class of 'box' div and made the glitch CSS animation providing an animation name. Later used that animation class in the CSS keyframes and provided different background-position value to create the CSS glitch effect. Previously I have made some snippets based on CSS animation. Check those out if you are interested. Without explaining further, I am providing you the code so that you can play around with it.

HTML

<!DOCTYPE html>
<!--code by codingflicks.com-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Glitch Effect | Pure CSS Animation </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <div class="banner">
            <h1>GLITCH EFFECT</h1>
        </div>
    </div>
</body>
</html>

CSS

body{
  margin:0;
  padding:0;
}
      .banner{
  position:absolute;
  display:inline-block;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:800px;
  text-align:center;
  justify-content: center;
}
h1 {
	font-size: 100px;
	white-space: nowrap;
	color: #fff;
	font-family: poppins;
	text-shadow: 0 2px 5px #000;
}
.box{
  text-align:center;
  justify-content:center;
  position: absolute;
  width:100%;
  height:100%;
  background: url('https://images.pexels.com/photos/2339009/pexels-photo-2339009.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
    background-size: cover;
}
.box:before{
  content: '';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: url('https://images.pexels.com/photos/2339009/pexels-photo-2339009.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  background-size: cover;
  mix-blend-mode:hard-light;
 
}
.box:hover:before{
  animation:animate .3s infinite;
}
@keyframes animate{
  0%{
    background-position: 0 0;
    filter:hue-rotate(0deg);
  }
  10%{
    background-position: 4px 0px;
  }
  15%{
    background-position: -8px 0px;
  }
  
  20%{
    background-position: -4px 0;
  }
  30%{
    background-position: 12px 0;
  }
  40%{
    background-position: -16px 0;
  }
  50%{
    background-position: -24px 0;
  }
  60%{
    background-position: 16px 0;
  }
  70%{
    background-position: 0 22px;
  }
  80%{
    background-position: -40px -10px;
  }
  100%{
    background-position: 0 0;
    filter:hue-rotate(360deg);
  }
}

Please do not enter any spam link in the comment box.