All Collections
Dynamic Content for Elementor
Features
Images Distortions Hover
Images Distortions Hover
Updated over a week ago

Images Distortion Hover exploits WebGL Technology 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.

Effects

A 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 displacement, displacement ima map, subdivision, blow);

  • Width (drip, wave, ring);

  • Radius (ring);

  • ScaleX (drip);

  • Scaley (drip);

In this DEMO you can see the effects.

Roll-over

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

  • Image resolution (be careful not to exaggerate 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.

Style

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

  • Width;

  • Height;

  • Alignment;

  • Border type and color;

  • Border Radius;

  • Padding;

  • Box Shadow.

Did this answer your question?