Image Zoom

Magnified inspection of an image on hover or click.

html

<figure class="img-zoom img-zoom--hover">
  <div class="img-zoom__frame" style="border-radius:10px;--zoom:1.6;" tabindex="0" role="img" aria-label="Hover to inspect detail">
    <svg class="img-zoom__svg" viewBox="0 0 400 300" width="100%" height="100%" aria-hidden="true"><rect width="400" height="300" fill="#F5C2E0"/><circle cx="140" cy="110" r="46" fill="#FAF7F2"/><circle cx="260" cy="190" r="30" fill="#A8E6C1"/></svg>
  </div>
  <figcaption class="img-zoom__caption">Hover to inspect detail</figcaption>
</figure>
<style>
.img-zoom { margin: 0; max-width: 320px; font: 12px/1.4 system-ui, sans-serif; color: #241430; }
.img-zoom__frame { overflow: hidden; border: 1px solid #24143022; cursor: zoom-in; }
.img-zoom__svg { display: block; width: 100%; height: 100%; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
.img-zoom__svg { transition: transform .2s ease; }
}
.img-zoom--hover .img-zoom__frame:hover .img-zoom__svg { transform: scale(var(--zoom)); }
.img-zoom--focus .img-zoom__frame:focus-visible .img-zoom__svg { transform: scale(var(--zoom)); }
.img-zoom__frame:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
.img-zoom__caption { margin-top: 8px; color: #24143099; }
</style>

tailwind

<figure class="img-zoom-tw img-zoom-tw--hover m-0 max-w-[320px] font-sans text-xs text-[#241430]">
  <div class="img-zoom-tw__frame overflow-hidden border border-[#24143022] cursor-zoom-in" style="border-radius:10px;--zoom:1.6;" tabindex="0" role="img" aria-label="Hover to inspect detail">
    <svg class="img-zoom-tw__svg block w-full h-full" viewBox="0 0 400 300" width="100%" height="100%" aria-hidden="true"><rect width="400" height="300" fill="#F5C2E0"/><circle cx="140" cy="110" r="46" fill="#FAF7F2"/><circle cx="260" cy="190" r="30" fill="#A8E6C1"/></svg>
  </div>
  <figcaption class="mt-2 text-[#241430]/60">Hover to inspect detail</figcaption>
</figure>
<style>
.img-zoom-tw__svg { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
.img-zoom-tw__svg { transition: transform .2s ease; }
}
.img-zoom-tw--hover .img-zoom-tw__frame:hover .img-zoom-tw__svg { transform: scale(var(--zoom)); }
.img-zoom-tw--focus .img-zoom-tw__frame:focus-visible .img-zoom-tw__svg { transform: scale(var(--zoom)); }
.img-zoom-tw__frame:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

react

export function ImageZoom({
  trigger = "hover",
  zoomLevel = 1.6,
  radius = 10,
  caption = "Hover to inspect detail",
}) {
  return (
    <figure style={{ margin: 0, maxWidth: 320, font: "12px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <div
        className={`img-zoom-rc img-zoom-rc--${trigger}`}
        style={{ overflow: "hidden", border: "1px solid #24143022", cursor: "zoom-in", borderRadius: radius, "--zoom": zoomLevel }}
        tabIndex={0}
        role="img"
        aria-label={caption}
      >
        <svg viewBox="0 0 400 300" width="100%" height="100%" style={{ display: "block" }} aria-hidden="true">
          <rect width="400" height="300" fill="#F5C2E0" />
          <circle cx="140" cy="110" r="46" fill="#FAF7F2" />
          <circle cx="260" cy="190" r="30" fill="#A8E6C1" />
        </svg>
      </div>
      <figcaption style={{ marginTop: 8, color: "#24143099" }}>{caption}</figcaption>
      <style>{`
        .img-zoom-rc svg { transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
.img-zoom-rc svg { transition: transform .2s ease; }
}
        .img-zoom-rc--hover:hover svg { transform: scale(var(--zoom)); }
        .img-zoom-rc--focus:focus-visible svg { transform: scale(var(--zoom)); }
        .img-zoom-rc:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
      `}</style>
    </figure>
  );
}