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.
- tilt-effect1
- tilt-effect2
- tilt-effect3
- tilt-effect4
- tilt-effect5
- tilt-effect6
- tilt-effect7
- 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)

Tilt Effect 1

Tilt Effect 2

Tilt Effect 3

Tilt Effect 4

Tilt Effect 5

Tilt Effect 6

Tilt Effect 7

Tilt Effect 8
