Create a glitch effect on mouse-over with CSS

In this article

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: Developers

Create a glitch effect on mouse-over with CSS

Step 1

Step 2

Step 3

Share this article

Read next

Create a very modern hover on a link

Create an animated "rainbow" button with CSS

Create hover text on image with CSS

Create a map displaying links on mouse-over with CSS

Creating circled buttons on hover with HTML and CSS

Create an animated 3D button using CSS

Make an arrow that expands when hovered over with CSS

Creating an animated list with CSS

Become the solopreneur you dream of being.