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 ($37/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: