SEO и реклама

Аудит сайта

Разработка сайтов

Лендинги

UX/UI Дизайн

Дизайн в Figma

API Интеграции

Интеграция 1с

Моб. разработка

IOS приложения

Многостраничные сайты

Интернет-магазины

Тех. поддержка

SEO-оптимизация сайта

Верстка на Тильда

Дизайн моб. приложений

Интеграция "Айко"

Модификации

Telegram-боты

Регистрация аккаунта Apple Developer

Настройка рекламы

Узнать стоимость проекта

Данные коды позволяют присвоить изображениям свой hover-effect при наведении. Ниже представлены 9 вариантов применения

9 hover effects для изображений на Tilda

Главная
/
Модификации
/
9 hover effects для изображений на Tilda

Заказать код

Вступить в чат

Поблагодарить

Видео-урок

#10

#11

Инструкция

Вставьте фото в zero-блок и присвойте ему class : zoomon

Выберите номер эффекта на фото, который вам понравился по кнопке "Смотреть примеры"

Вставьте код ниже в блок "T123" на странице

Скопировать код №1

Код скопирован

Hover effect #1 (Снова работает)

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon {
  overflow: hidden;
  border-radius: 16px;               /* оставь свой радиус или удали строку */
}

.zoomon .tn-atom {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: translateZ(0) scale(1);          /* GPU + начальное состояние */
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center center;
}

.zoomon .tn-atom:hover {
  transform: translateZ(0) scale(1.1) !important;   /* 1.1 или 1.12 как хочешь */
}
</style>

Скопировать код №2

Код скопирован

Hover effect #2 (Работает)

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon2 {
  overflow: hidden;
  border-radius: 16px; /* добавь свой, если нужно */
  pointer-events: auto !important;
}

.zoomon2 .tn-atom {
  -webkit-transform: translateZ(0) scale(1.5);
  transform: translateZ(0) scale(1.5);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  backface-visibility: hidden;
  will-change: transform;
}

.zoomon2 .tn-atom:hover {
  -webkit-transform: translateZ(0) scale(1) !important;
  transform: translateZ(0) scale(1) !important;
}
</style>

Скопировать код №3

Код скопирован

Hover effect #3

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom {
	-webkit-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.zoomon .tn-atom:hover {
-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

</style>

Скопировать код №4

Код скопирован

Hover effect #4

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom {
	-webkit-filter: blur(3px);
	filter: blur(3px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.zoomon .tn-atom:hover {
	-webkit-filter: blur(0);
	filter: blur(0);
}

</style>

Скопировать код №5

Код скопирован

Hover effect #5

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom {
-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.zoomon .tn-atom:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

</style>

Скопировать код №6

Код скопирован

Hover effect #6

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom {
-webkit-filter: sepia(100%);
	filter: sepia(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.zoomon .tn-atom:hover {
	-webkit-filter: sepia(0);
	filter: sepia(0);
}

</style>

Скопировать код №7

Код скопирован

Hover effect #7

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom {
-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.zoomon .tn-atom:hover {
	-webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(3px);
}

</style>

Скопировать код №8

Код скопирован

Hover effect #8

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.zoomon .tn-atom:hover {
	opacity: .5;
}

</style>

Скопировать код №9

Код скопирован

Hover effect #9

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom:hover {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}

@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

</style>

Скопировать код №10

Код скопирован

Hover effect #10

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon10 {
  overflow: hidden;
}

.zoomon10 .tn-atom {
  transition: all 0.5s ease;
}

.zoomon10 .tn-atom:hover {
  filter: invert(1); /* Эффект инверсии цвета */
}
</style>

Скопировать код №11

Код скопирован

Hover effect #11

 <!-- 9 hover effects для изображений на Tilda -->
 <!-- https://youx.agency/9-hover-effects-dlya-izobrazhenij-na-tilda -->

<style>
.t396__elem.zoomon11 {
  overflow: hidden;
}

.zoomon11 .tn-atom {
  transition: transform 0.3s ease-in-out;
}

.zoomon11 .tn-atom:hover {
  transform: rotate(15deg) scale(1.4);
  animation: shake 0.5s ease-in-out;
}

.zoomon11 .tn-atom:not(:hover) {
  transform: rotate(0) scale(1);
}

@keyframes shake {
  0% {
    transform: rotate(15deg) scale(1.4) translateX(0);
  }
  25% {
    transform: rotate(15deg) scale(1.4) translateX(-5px);
  }
  50% {
    transform: rotate(15deg) scale(1.4) translateX(5px);
  }
  75% {
    transform: rotate(15deg) scale(1.4) translateX(-5px);
  }
  100% {
    transform: rotate(15deg) scale(1.4) translateX(0);
  }
}
</style>

Данные коды позволяют присвоить изображениям свой hover-effect при наведении. Ниже представлены 9 вариантов применения

9 hover effects для изображений на Tilda

Инструкция

Другие модификации