Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен

Увеличение карточек товара при наведение

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация позволит увеличивать карточки товаров в каталоге при наведении на них
Добавьте уникальность в Ваш проект
Для Вашего удобства в коде есть комментарии, чтобы Вы могли ориентироваться и менять все так, как хотите.
Обратите внимание, что данный эффект будет работать только на экранах, которые больше 960px из-за невозможности сделать наведение на мобильных устройствах. Имейте это ввиду при внедрении данной модификации.
Как это выглядит?
More products
Как это добавить?
Первый шаг
Создаем любой блок из вкладки "Магазин" ST305N. Добавляем в него любое количество товаров через настройки блока или через раздел "Каталог"
Второй шаг
Создаем блок T123 и помещаем код на страницу с товаром. Внутри кода есть комментарии, ориентируйтесь на комментарии.

<!--Взято с сайта https://digistudio.su/uvelichenie-kartochek-tovara-pri-navedenie-->

<style>
/*Добавляем отступ под кнопкой и задаём  время перехода 0,4 сек */
  .t776__col , .t-store__card {
    padding-bottom: 10px;
    transition: all 0.4s ease-in-out;
}
 /*Добавляем эффект при наведении */
   .t776__col:hover  , .t-store__card:hover {
    transform: scale(1.04);
    -moz-transform: scale(1.04);
    -ms-transform: scale(1.04);
    -o-transform: scale(1.04);
    position: relative;
    z-index: 2;
    -webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.45);
}
  /*Добавляем отступы для текста и заголовка: слева и справа */  
    .t776__textwrapper , .t776__btn-wrapper , .t-store__card__btns-wrapper , .t-store__card__textwrapper{
    padding: 10px 10px 0px 10px;
}
   /*Отменяем увеличение на экранах меньше 960 px + добавляем отступ сверху 15рх */  
      @media screen and (max-width: 960px) {
    .t776__col ,  .t-store__card {
    padding-top: 15px;    
    transform: none!important;
}}

</style>
Как Вам модификация?
Попробуйте наши модификации по пробному тарифу на 2 недели за 99 рублей.
Смотрите также
    Made on
    Tilda