Увеличение картинки в Zero-блоке при наведении в пределах границ
Данная модификация поможет сделать эффект увеличения изображения без изменения размера самой области
Zero-блок
Увеличение картинки
в Zero-блоке при наведении
в пределах границ
в Zero-блоке при наведении
в пределах границ
Инструкция для установки
Видеоинструкция
Текстовая инструкция
Появится в течении дня
2. Скопируйте готовый код и вставьте в блок T123. Сам блок с кодом разместите под блоком каталога или в футере сайта.
1. Добавляете для картинки в зеро-блоке имя класса
Для этого нажмите правой кнопкой мыши на картинку и выберите:
img-zoom
Генератор кода
Имя класса
Размер (%)
Скорость (ms)
Скругление (px)
Скругление (px)
Скопировать код
Код скопирован
Код с вашими параметрами
<!-- Увеличение изображения в Zero-блоке при наведении в рамках своих границ | https://twikup.ru/image-zoom-on-hover --> <style> .img-zoom {
border-radius: 20px;
overflow: hidden;
}
.img-zoom .tn-atom {
border-radius: 20px;
transition: transform 200ms ease-in-out;
}
.img-zoom:hover .tn-atom {
transform: scale(115%);
}
</style> Могут быть интересны
Тебе нужна помощь
с установкой или возник вопрос по сервису?
с установкой или возник вопрос по сервису?