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.
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.