12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on Apr 20, 2020

Image Distortion Hover Effects in Oxygen

David Browne

In this members-only tutorial we'll walkthrough implementing distortion hover effects using the hover-effect js library. We'll be using the repeater component, displaying featured pages with images coming from custom fields.

Live Demo

You can see the effect out in the wild on https://digitalpresent.io/ & http://vadimtyurin.com/

The hover effect library

This hover effect library isn't for adding hover effects to existing inline images or background images. Instead, the images are going to be added to the page by the js libary.

What we need to do is tell the library where on our page we want our images to be placed, what the dimensions need to be and which images to use.

There are three images involved for each hover effect to work; the original image, the image that appears when hovered and a 'displacement' image. The displacement image is the pattern used to create the different types of transition effects. We could use our own displacement image for a unique effect or there are 16 default images to choose from that come with the hover-effect library.

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.