Модификации
2024-03-26 17:35 Эффекты и анимация

Увеличение изображения в Шейпе при наведении в Тильде

Очень актуальный и эффектный способ показать изображение на которое можно кликнуть с помощью увеличения картинки внутри шейпа.

Для применения модификации следуйте инструкции:
  1. Создайте зеро-блок и в нем элемент Shepe
  2. Присвойте элементу класс .Cube-zoom (Клик правой кнопкой мыши по элементу Add CSS Class Name)
  3. Создайте блок Т123
  4. Добавьте код из инструкции
  5. Настройте параметры отображения в коде
  6. Опубликуйте страницу 
<!-- Увеличение изображения в Шейпе  Cubeteam.ru-->

<style>
.Cube-zoom {
    border-radius: 10px;
    overflow: hidden;
}
.Cube-zoom .tn-atom {
    border-radius: 10px;
    transition: transform 150ms ease-in-out;
}
.Cube-zoom:hover .tn-atom {
    transform: scale(110%);
}
</style>