YOUX agency
youx.agency
Прайс
Услуги
Портфолио
Контакты
Обсудить проект
SEO
Аудит сайта
Разработка
Лендинги
UX/UI Дизайн
Дизайн в Figma
Интеграции
Интеграция 1с
Другое
Заполнить бриф
Корпоративные сайты
Интернет-магазины
Тех. поддержка
Оптимизация сайта
Верстка проектов
Брендинг
Интеграция Iiko
Модификации
Переезд с другой CMS
Обучение
+2

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

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

Заказать код
Вступить в чат
Предложить код
Видео-урок
#1
#2
#3
#4
#5
#6
#7
#8
#9

Инструкция

1

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

2

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

3

Вставьте код ниже в блок "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;
}

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

.zoomon .tn-atom:hover {
transform: scale(1.1);
}
</style>
Скопировать код №2
Код скопирован
Hover effect # 2

 <!-- 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: scale(1.5);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.zoomon .tn-atom:hover {
-webkit-transform: scale(1);
	transform: scale(1);
}
</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>

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