Create a glitch effect on mouse-over with CSS

Add a modern glitch effect to your presentations or your logo, whether it's hovering or permanent! Let's find out how.

Updated on December 9, 2024

For your presentations or your logo, whether on hover or permanently, add a modern glitch/bug effect! Let’s discover together how to set it up.

Step 1

Let's start with the HTML code.

HTML

<i class="fab fa-instagram fa-4x"></i>

And in the head tag:

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />

We will use Font Awesome to display an icon without the hassle of searching for an image.

Step 2

Let's style the icon and the hover effect.

CSS

.fab {
  color: white;
}

.fab:hover {
  animation: icon-glitch 1s infinite;
}

On hover, we call an “icon-glitch” animation. Just call it to apply this effect to all elements.

Step 3

Let's create the icon-glitch animation to complete the project.

CSS

@keyframes icon-glitch {
  0% {
    text-shadow: 5px 4px rgb(244, 67, 54), -5px -6px rgb(33, 150, 243);
  }
  25% {
    text-shadow: -5px -6px rgb(244, 67, 54), 5px 4px rgb(33, 150, 243);
  }
  50% {
    text-shadow: 5px 4px rgb(244, 67, 54), -8px 4px rgb(33, 150, 243);
  }
  75% {
    text-shadow: -8px -4px rgb(244, 67, 54), -5px -4px rgb(33, 150, 243);
  }
  100% {
    text-shadow: -5px 0 rgb(244, 67, 54), 5px -4px rgb(33, 150, 243);
  }
}

Category: Development

Create a glitch effect on mouse-over with CSS

Step 1

Step 2

Step 3

Try for Free