URL скопирован в буфер обмена!
Как добавить зум на изображение при наведении?
С помощью этой модификации можно добавить эффект зума при наведении на изображения в Zero Block. Дополнительно можно добавить фильтры
Модификация обновлена. В поле "Дополнительный эффект" добавлена опция "заливка при наведении".
Модификация не работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс элемента
Радиус скругления изображения
Размер изображения при наведении в %
Время анимации в мс
Тип анимации
Дополнителньый эффект
Настройки анимации
Цвет заливки
Прозрачность
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD026--><style> .t396__elem.ticode-zoom { overflow: hidden; border-radius: 0px; } .ticode-zoom .tn-atom { border-radius: 0px; transition: transform 300ms ease-in-out; -webkit-transition: 300ms ease-in-out; } .ticode-zoom .tn-atom:hover { transform: scale(125%); }
.ticode-zoom .tn-atom::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
transition: all 300s ease-in-out;
-webkit-transition: all 300ms ease-in-out;
z-index: 2;
border-radius: 0px;
opacity: 0;
}
.ticode-zoom .tn-atom:hover::before {
background-color: ;
opacity: ;
} </style>
1. Создаем Zero Block с изображением(можно также использовать шейп)
2. Назначаем изображению класс из генератора ticode-zoom
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. Указываем в генераторе дополнительные настройки:
"Радиус скругления" - можно скруглить углы у нашей картинки;
"Размер изображения при наведении" - указываем размер в процентах. Стандартный размер картинки 100%. Если указываем больше, то при наведении картинка будет увеличиваться. Если меньше, то уменьшаться;
"Время анимации в мс" - указываем время в миллисекундах, за которое будет происходить изменение размера картинки;
"Тип анимации" - указываем плавность анимации. В большинстве случаев подходит стандартное значение;
"Дополнительный эффект" - можно накинуть проигрывание доп. эффекта на картинку.
"Цвет заливки" - указываем цветовой код заливки если выбрали "заливка при наведении" в поле "Дополнительный эффект";
"Прозрачность" - указываем прозрачность заливки если выбрали "заливка при наведении" в поле "Дополнительный эффект". Значение от 0.1 до 1, где 0.1 это 10%, а 1 это 100%;
4. Копируем готовый код и вставляем в HTML блок Т123
Примечание! Если у вас несколько изображений и ко всем нужно применить одинаковый эффект, то можно присвоить всем картинкам одинаковый класс. Если на разные картинки нужен разный эффект(например чтобы одна увеличивалась на 150%, а вторая на 125%), то нужно генерировать два кода меняя в генераторе названия класса. Для одной картинки сделать класс ticode-zoom, а для второй например ticode-zoom1
2. Назначаем изображению класс из генератора ticode-zoom
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. Указываем в генераторе дополнительные настройки:
"Радиус скругления" - можно скруглить углы у нашей картинки;
"Размер изображения при наведении" - указываем размер в процентах. Стандартный размер картинки 100%. Если указываем больше, то при наведении картинка будет увеличиваться. Если меньше, то уменьшаться;
"Время анимации в мс" - указываем время в миллисекундах, за которое будет происходить изменение размера картинки;
"Тип анимации" - указываем плавность анимации. В большинстве случаев подходит стандартное значение;
"Дополнительный эффект" - можно накинуть проигрывание доп. эффекта на картинку.
"Цвет заливки" - указываем цветовой код заливки если выбрали "заливка при наведении" в поле "Дополнительный эффект";
"Прозрачность" - указываем прозрачность заливки если выбрали "заливка при наведении" в поле "Дополнительный эффект". Значение от 0.1 до 1, где 0.1 это 10%, а 1 это 100%;
4. Копируем готовый код и вставляем в HTML блок Т123
Примечание! Если у вас несколько изображений и ко всем нужно применить одинаковый эффект, то можно присвоить всем картинкам одинаковый класс. Если на разные картинки нужен разный эффект(например чтобы одна увеличивалась на 150%, а вторая на 125%), то нужно генерировать два кода меняя в генераторе названия класса. Для одной картинки сделать класс ticode-zoom, а для второй например ticode-zoom1
Настройки
Радиус
Размер
Время
Эффект
10
125%
300
обесцветить
Настройки
Радиус
Размер
Время
Эффект
10
125%
300
блюр
Настройки
Радиус
Размер
Время
Эффект
10
75%
500
обесцветить
Настройки
Радиус
Размер
Время
Эффект
10
125%
300
нет
