Zoom efekt při hoveru

Tento kód zajistí, že při najetí myší (hoveru) se obrázek zvětší. Obrázek je potřeba obalit nějakým dalším elementem (blockem), na kterém je class .ap-zoom-block. Tento kód je kompatibilní s Bricks Builderem. U dalších builderů či vlastního řešení bude potřeba možná ještě kód upravit.

/* ZOOM OBRÁZKU PŘI HOVERU */
.ap-zoom-block {
  overflow: hidden;
}

.ap-zoom-block img {
  width: 100%;
  height: auto;
  transition: transform 3s ease;
  will-change: transform; /* optimalizuje vykreslení */
  transform-origin: center center; /* zajistí zoom ze středu */
}

.ap-zoom-block:hover img {
  transform: scale(1.2);
}