Image

Image element displays an image within customizable container

Image element displays an image within customizable container. Element popup contains following options;

Defaults tab

  1. Select Image  -  Select or upload an image.
  2. Image size  -  Select the image size to be used.
  3. Image grayscale  -  Add grayscale effect.
  4. Container metrics  -  Add custom class or ID to HTML container and adjust visibility on specific devices.

Actions tab

  1. Click action  -  Select image click action. Open a link or the image in lightbox.
  2. Swap image  -  Swap image with another image on hover or once in view.

Container tab

  1. Container height  -  Set image container height.
  2. Container width  -  Set image container width.
  3. Container alignment  -  Set image container alignment. Left right or centered.
  4. Container box style  -  Adjust .thz-media-image-container box style.
  5. Animate container  -  Add animation to the media HTML container.

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.

Overlay tab

  1. Overlay display mode  -  Select overlay display mode.
  2. Image overlay background  -  Set image overlay background.
  3. Image overlay effect  -  Select image overlay hover effect and duration.
  4. Image effect  -  Select image hover effect and duration.
  5. Overlay icon effect  -  Select image overlay icon hover effect and duration.
  6. Image overlay distance  -  Distance the image overlay from image 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 image HTML container.
  2. Container parallax  -  Activate/deactivate container parallax.
  3. Media parallax  -  Activate/deactivate media parallax. This effect does NOT work if media height is auto.