Image element displays an image within customizable container. Element popup contains following options;
Defaults tab
- Select Image - Select or upload an image.
- Image size - Select the image size to be used.
- Image grayscale - Add grayscale effect.
- Container metrics - Add custom class or ID to HTML container and adjust visibility on specific devices.
Actions tab
- Click action - Select image click action. Open a link or the image in lightbox.
- Swap image - Swap image with another image on hover or once in view.
Container tab
- Container height - Set image container height.
- Container width - Set image container width.
- Container alignment - Set image container alignment. Left right or centered.
- Container box style - Adjust .thz-media-image-container box style.
- Animate container - Add animation to the media HTML container.
Lightbox tab
- Backdrop Style - Select backdrop ( popup background ) style.
- Backdrop Opacity - Set backdrop ( popup background ) opacity.
- Popup effect - Select popup window opening effect.
Overlay tab
- Overlay display mode - Select overlay display mode.
- Image overlay background - Set image overlay background.
- Image overlay effect - Select image overlay hover effect and duration.
- Image effect - Select image hover effect and duration.
- Overlay icon effect - Select image overlay icon hover effect and duration.
- Image overlay distance - Distance the image overlay from image box edges.
Overlay icon tab
- Show overlay icon - Show/hide overlay icon.
- Overlay icon - Set overlay icon. Shown only if icon selected.
- Icon metrics - Adjust icon metrics.
- Shape metrics - Adjust icon background shape metrics.
Effects tab
- Animate container - Add animation to the image HTML container.
- Container parallax - Activate/deactivate container parallax.
- Media parallax - Activate/deactivate media parallax. This effect does NOT work if media height is auto.