Captions

Captions are supported out of the box, simply add new element to your container and use f-panzoom__caption class name. Example:

<div class="f-panzoom" id="myPanzoom">
  <img
    class="f-panzoom__content"
    src="https://lipsum.app/id/15/1600x1200"
    alt="Sample image"
    width="1600"
    height="1200"
  />
  <div class="f-panzoom__caption">
    Lorem ipsum dolor sit amet, consectetur adipiscing.<br />
    Quisque eu ornare ante, et gravida mauris.
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing.
Quisque eu ornare ante, et gravida mauris.

Panzoom is very responsive, you can easily change the placement of elements using CSS. In this example, flex-direction: row is added to the container:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis ultricies.