Image Morph Plugin

What is it?

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect. Attention: This technique uses some CSS properties that only work in modern browsers (i.e. 3D Transforms). The effect only works on hover which means that the effect won’t be viewable on a touch device at this point.

This is a FREE extension. You can download it HERE

How it works

A normal image is replaced with layers of semi-transparent divisions of the same image. Every layer moves according to the configuration, creating a subtle motion effect. Attention: The image may need to be wrapped in a div depending on its location within your template. If the image is smaller than the parent div, a wrapper div should be placed around the image with a max-width set so that the divisions can be sized correctly.  


 <div style="max-width:400px"><img src="/market/images/coffee-small.jpg" alt="coffee small" class="tilt-effect tilt-effect3" /></div>


coffee small

How to Activate

In order for the image effect to take work, you need to add an image class.


tilt-effect  |  This is mandatory to enable the plugin. This will use the default settings in the plugin parameters.

These can be added to the main class to create pre-defined effects.

  1. tilt-effect1
  2. tilt-effect2
  3. tilt-effect3
  4. tilt-effect4
  5. tilt-effect5
  6. tilt-effect6
  7. tilt-effect7
  8. tilt-effect8


 <img src="/market/images/coffee-small.jpg" alt="coffee small" class="tilt-effect tilt-effect3" />

See the 8 different built in effects below.


Default Effect (Set from plugin params with added CSS for B/W effect)



 Tilt Effect 1


 Tilt Effect 2


 Tilt Effect 3


 Tilt Effect 4


 Tilt Effect 5


 Tilt Effect 6


 Tilt Effect 7


 Tilt Effect 8