Заказать эффект

Объекты · Ховерfx/15

AW-Flow — Hover Zoom

Изображение плавно приближается внутри своей рамки и мягко затемняется при наведении.

Запуск
по наведению
Параметров
8
Телефоны
свои настройки
Код
HTML-блок
.awf-hover-zoom

Готовый код

Это тот же код, что сейчас работает в превью: значения подставлены из конструктора, внешние библиотеки не нужны.

класс: awf-hover-zoom1,0 КБ · HTML + CSS + JS
<!-- AW-Flow — Hover Zoom · класс элемента: awf-hover-zoom -->
<style>
.awf-hover-zoom {
  --awf-scale: 1.08;
  --awf-duration: 700ms;
  --awf-radius: 12px;
  --awf-overlay-color: #0c0c14;
  --awf-overlay-opacity: 0.25;
  --awf-ease: cubic-bezier(0.33, 1, 0.68, 1);
}
.awf-hover-zoom {
  overflow: hidden;
  border-radius: var(--awf-radius);
}
.awf-hover-zoom > * { transition: transform var(--awf-duration) var(--awf-ease); }
.awf-hover-zoom:hover > * { transform: scale(var(--awf-scale)); }
.awf-hover-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--awf-overlay-color);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--awf-duration) var(--awf-ease);
}
.awf-hover-zoom:hover::after { opacity: var(--awf-overlay-opacity); }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-hover-zoom > *, .awf-hover-zoom::after { transition: none; }
}
</style>

Вставляется в HTML-блок на той же странице, где элемент с классом.

Как добавить в Tilda

Эффект работает на опубликованной странице и в режиме предпросмотра — в самом редакторе Tilda скрипты не выполняются.

  1. Назначьте класс элементу. В Zero Block кликните правой кнопкой по нужному элементу и выберите пункт добавления CSS-класса (Add CSS class name). Впишите awf-hover-zoom — без точки. Класс ставится на сам элемент, не на весь артборд.
  2. Добавьте HTML-блок. На этой же странице добавьте блок T123 «HTML-код» (проще всего найти поиском в библиотеке блоков) или элемент HTML внутри Zero Block.
  3. Вставьте код. Скопируйте код целиком и вставьте в этот HTML-блок, сохраните и опубликуйте страницу.
  4. Меняете настройки? Сначала удалите старый код этого эффекта, затем вставьте новый и снова опубликуйте страницу.
  5. Разные настройки — разные классы. Для второго варианта на той же странице задайте в конструкторе другой класс, например awf-hover-zoom-2, и вставьте его код отдельно.
Ещё в разделе «Объекты»Весь каталог