Hover-over Glitch Effects Using CSS Animations

Hover-over Glitch Effects Using CSS Animations

CSS animations are used to create the effect of motion. While two images in a three-image stack are going through rapid changes, thanks to a clip property, the first image remains stable. The stable image creates a visual sense of off-setting the rapidly moving, clipped images. This results in the speakers' photos appearing to ripple like water. But this technique isn't the only way to create this kind of effect.

Some experiments were undertaken and shared on Codrops. Coders figured out how to create this same glitch effect without using a clip property. Using a clip-path property, the team was able to create the same glitch. The benefit of using this technique is that no one image needs to be fixed. This gives the creator a bit more flexibility with images and the opportunity to work with a greater number of images. The programmers also used background blend modes that served to create slightly more interesting effects.

The glitch effect is only noticeable when hovering, so only the first level is visible. Once you hover over the image, all layers are visible. This means you'll see all the shifting images at once and the effect is pretty intriguing. Animations and a transform are applied to each layer as well. A pattern emerges with pauses, blanks, small images and larger images. In this particular instance, programmers decided to end the last layer with a flash.

On the down-side, the clip-path property technique is not supported by many browsers, for instance, Edge and IE won't support it. But if you are interested in discovering more about clip-paths then Bennett Feely has created a clip-path visualization tool called Clippy. It's worth checking out.

CSS Animation Web Design