Image Distortion Effects with SVG Filters

Three distortion effects powered by SVG filters that are applied to an image when hovering a link.
SVGFilterHover_featured

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

In our recent articles series on SVG Filter Effects, Sara has shown how powerful and versatile SVG filters can be. They allow for a plethora of unique effects. Today we would like to share three animated distortion effects that we apply to an image when hovering a text link. We use feTurbulence and feDisplacementMap to create different kinds of fragment and wave-like distortions. These kind of effects have become quite popular and there are many variations. Menu hover animations showing an image in the background have also been around for a while and you can see an example that we’re based upon on Sara Marandi’s website.

Attention: Note that this is highly experimental and that we use modern CSS properties that might not be supported in older browsers.

If you’d like to understand how SVG filters work and learn how to create your own effects, we highly recommend you read Sara’s series:

Have a look at the effects we’ve created for the demos:

SVGFilterHover01.2019-03-12 17_25_08

SVGFilterHover02

SVGFilterHover03

We hope you like these effects and find them useful!

References and Credits

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.