Image With Zoom

Content Controls

Controls

These controls allow you to upload and define the attributes of the image you wish to display, enabling customization of visual presentation and optimization for better site performance.

  • Image – Upload the image you want to display, and it becomes the focal point for the zoom effect.
  • Image Size – Select the display size of your image for optimal viewing. Note: This control is only available when an image is uploaded.
  • Alt – Input an alt description for the image, improving accessibility and SEO. This field is accessible once an image is set.
  • Lazy Load – Toggle whether the image should load as users scroll down the page, improving loading speeds. Available when an image is in place.

Design Controls

Container

These settings allow for precise adjustments to the image container, enabling changes to width, border style, and adding shadow for a distinct look and feel.

  • Width – Define the width of the image container, ensuring it fits perfectly in your site layout.
  • Borders – Customize the image container’s borders with specific options:
    • Radius – Set the roundness of the container’s corners for a softer, modern appearance.
    • Styling – Adjust border color, width, and style to match your website’s theme.
    • Shadow – Apply a shadow effect to the container, giving the image depth and emphasis.

Effect

Modify the interactive zoom effect on the image with controls over the zoom scale and the cursor’s appearance during the zoom.

  • Zoom Scale – Control the maximum zoom level when the image is hovered over or clicked.
  • Cursor – Choose a cursor style that indicates the image is zoomable, enhancing user interaction.

Spacing

These controls manage the space above and below the image container, aiding in the aesthetic spacing of your site content.

  • Margin Top – Set the amount of space above the image container, balancing visual spacing in your layout.
  • Margin Bottom – Adjust the space below the image container to ensure content is evenly distributed on the page.