Customizing styles

For this feature, you need to set the custom properties in a parent element of your image, as the modal will be created as the next sibling.

HTML

<div class="image-parent">
  <img
    data-zoomable-image
    src="./nature.webp"
    width="1280"
    height="853"
  />
</div>

CSS

.image-parent {
  --zi-image-outline: 3px solid blue;
  --zi-button-background: pink;
  --zi-button-color: green;
  --zi-button-outline: 4px solid red;
}