Images Distortions Hover

Images distortion Hover exploits WebGL tecnology and operates on Canvas object.

When using Threejs, a 3D environment is created. It shows a plane which is orthogonal to the camera and applies an image-based texture.Transformations are processed using the shaders.


Transformation occurs when rolling over the plane.

Several types of calculations produce different transformation effects:

  • Drip
  • Wave
  • Ring
  • Horizontal displacement
  • Vertical displacement
  • Displacement image map
  • Subdivision
  • Blow

The following parameters are available to modulate the effects:

  • Intensity (vertical displavement, displacement ima map, subdivision, blow)
  • Width (drip, wave, ring)
  • Radius (ring)
  • ScaleX (drip)
  • Scaley (drip)

In this DEMO you can see the effects.


The hover effect is applied to 2 images and you can set:

  • Images resolution (watch out not to exagerate with pixels amount)
  • The transition speed
  • The easing function

Displacement image map

For some of the effects a displacement map is required, i.e. an image that is used to process the effect.

You can choose it from a predefined list or upload a customized one.


As for the image widget you can define the following style parameters:

  • Width
  • Height
  • Alignment
  • Border type and color
  • Border Radius
  • Padding
  • Box Shadow

Still need help? Contact Us Contact Us