magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Stacked Image


With this extension you can easily convert a standard image into a "3D element" on user interaction.

Some features:

- Virtually unlimited images stack per image.
- Virtually unlimited images handled per page.
- Multi-objects; allows to setup multiple images that share the same effect.
- Multi-instance; allows to setup multiple images with their own settings.
- Handles sizes, axis coordinates, rotation and transparencies.
- Optionally, inherits borders styles, radius and shadow from the original images to create the stack.
- RWD support.
- Smart z-index handling to allow an easy identification of the focused element.
- Transitions handling on interaction for smoother effects.
- Automatically fixes old browsers sizing issues.
- Lightweight (no jQuery required), backward and cross-browser compatible.
- Presets included!


HTML 4.01 Transitional
W3C compliant


DEMO


How to use?

1. Design your page including images as you usually do.
2. Drag and drop this extension.
3. Open the properties dialog box, enter the names of the images to convert.
4. Optionally, setup the initial 'stack' parameters.
5. Setup the 'stack' parameters for the hovering interaction.
6. Optionally, you can select a preset instead of #4 and #5.
7. Optionally, setup the transition, the inherited values from the main image, etc.
8. Preview or publish.

Enjoy!


Notes:

- Some effects cannot be viewed on older browsers that do not support CSS3.
- If you have a nice or complex effect and want it as a preset instead of setup it value per value,
  just get in contact!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with