Image Layers element can stack multiple image layers on top of each other inside a cusomizable container. Element popup contains following options;

Layers tab

1. Layers area  -  Click on select to change container ratio. Click on "Add image layer" to add new layer. Hover over the layer to see controls.

Settings tab

1. Layers container box style  -  Adjust .thz-image-layers box style.
2. Container box style  -  Adjust .thz-image-layers-container box style.
3. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Lightbox tab

1. Backdrop Style  -  Select backdrop ( popup background ) style.
2. Backdrop Opacity  -  Set backdrop ( popup background ) opacity.
3. Popup effect  -  Select popup window opening effect.
4. Show thumbnails slider  -  Show/hide lightbox thumbnails slider.

Overlay tab

1. Overlay display mode  -  Select overlay display mode.
2. Image overlay background  -  Set layer overlay background.
3. Image overlay effect  -  Select layer overlay hover effect and duration.
4. Image effect  -  Select layer image hover effect and duration.
5. Overlay icon effect  -  Select layer overlay icon hover effect and duration.
6. Image overlay distance  -  Distance the layer overlay from layer box edges.

Overlay icon tab

1. Show overlay icon  -  Show/hide overlay icon.
2. Overlay icon  -  Set overlay icon. Shown only if icon selected.
3. Icon metrics  -  Adjust icon metrics.
4. Shape metrics  -  Adjust icon background shape metrics.

Effects tab

1. Animate container  -  Add animation to the layers HTML container.
2. Container parallax  -  Activate/deactivate container parallax.
3. Media parallax  -  Activate/deactivate media parallax. This effect works for images only and it does NOT work if media height is auto! To parallax media for specific items only, add specific items in the order that you see them separated by comma like; 1,5,7. This would parallax media for 1st 5th and 7th item.

Layer Defaults tab

1. Select Image  -  Select or upload an image.
2. Image metrics  -  Adjust layer image size , position and grayscale filter.
3. Layer box style  -  Adjust .thz-img-layer box style
4. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.
5. Inherit style from  -  Insert layer ID to inherit the style from. If you have multiple layers with same box style you can set main layer Custom ID than add that ID here. This way ever layer on this page with this inherit ID will use same box style. This reduces the overhead CSS and renders the layers faster. Note that once the inherit ID is added the box style for this layer is not printed. The effects must be set on per layer basis.

Layer Actions tab

1. Click action  -  Select image click action. Open a link or the image in lightbox.

Layer Effects tab

1. Animate container  -  Add animation to the layer HTML container.
2. Container parallax  -  Activate/deactivate container parallax.