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.  

Example:

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

Output:

How to Activate

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

Options:

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

Example:

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