Hover Zoom

<div class="fx-0179-root">
  <a class="hzm-frame" href="#">
    <img class="hzm-image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='400' viewBox='0 0 560 400'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23667eea'/%3E%3Cstop offset='.5' stop-color='%23764ba2'/%3E%3Cstop offset='1' stop-color='%23f093fb'/%3E%3C/linearGradient%3E%3Cpattern id='s' width='20' height='20' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect x='10' width='10' height='20' fill='%236366f1' fill-opacity='.1'/%3E%3C/pattern%3E%3Cpattern id='q' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 .5H20M.5 0V20' stroke='%23fff' stroke-opacity='.1'/%3E%3C/pattern%3E%3CradialGradient id='l' cx='168' cy='120' r='241' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='.3'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='392' cy='280' r='241' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-opacity='.2'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3Crect width='560' height='400' fill='url(%23g)'/%3E%3Crect width='560' height='400' fill='url(%23s)'/%3E%3Crect width='560' height='400' fill='url(%23q)'/%3E%3Crect width='560' height='400' fill='url(%23l)'/%3E%3Crect width='560' height='400' fill='url(%23d)'/%3E%3C/svg%3E" alt="Motif dégradé violet quadrillé" width="560" height="400">
    <span class="hzm-label" aria-hidden="true">Hover Me</span>
  </a>
</div>

/* fx-0179 — Hover Zoom: the image grows inside its frame on hover or keyboard focus (CSS only).
   Everything is scoped to .fx-0179-root and the hzm- prefix: two copies on one page stay independent. */
.fx-0179-root,
.fx-0179-root *,
.fx-0179-root *::before,
.fx-0179-root *::after {
  box-sizing: border-box;
}

.fx-0179-root {
  --hzm-scale: 1.3;          /* zoom level on hover / keyboard focus */
  --hzm-duration: 0.5s;      /* zoom-in and zoom-out time */
  --hzm-width: 280px;        /* maximum frame width (the frame shrinks on small screens) */
  --hzm-ratio: 7 / 5;        /* frame shape */
  --hzm-radius: 0.75rem;     /* frame corners */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 250px;
  padding: 16px;
  position: relative;
  background: #0a0a0f;
  color: #fff;
  font-family: sans-serif;
}

/* Frame: fluid width (capped by --hzm-width), height from --hzm-ratio */
.hzm-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--hzm-width);
  aspect-ratio: var(--hzm-ratio);
  border-radius: var(--hzm-radius);
  overflow: hidden;
  isolation: isolate;
  background: #12121a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.hzm-frame:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Your image: any <img>, cropped to the frame like a cover photo */
.hzm-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
}

/* Optional caption over the image (delete the span if you do not want it) */
.hzm-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem;
  text-shadow: rgba(0, 0, 0, 0.3) 0 2px 4px;
  pointer-events: none;
}

.hzm-frame {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.hzm-image {
  transition: transform var(--hzm-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover on the frame or on a link that wraps it */
.hzm-frame:hover .hzm-image,
.fx-0179-root a:hover .hzm-image {
  transform: scale(var(--hzm-scale));
}
/* Keyboard focus on the frame (a link) or on a link that wraps it (separate rule: older browsers skip it alone) */
.hzm-frame:focus-visible .hzm-image,
.fx-0179-root a:focus-visible .hzm-image {
  transform: scale(var(--hzm-scale));
}

/* Reduced motion: the image still zooms, without the transition */
@media (prefers-reduced-motion: reduce) {
  .hzm-image {
    transition: none;
  }
}

CSS pur — aucun JavaScript requis.