Мы используем cookies для наилучшего представления нашего сайта. Продолжая пользоваться сайтом, вы принимаете условия обработки персональных данных, указанные в политике конфиденциальности
About our classes
Our classes program provides a gateway into the world of dance connecting young people and communities to artistic practice and engaging them in a range of inspirational and high-quality participatory activities nationally and internationally.
More products

Как оформить эффект наведения на карточку товара для Tilda

При наведении мышки плавно и немного увеличиваем блок + добавляем тень.
На примере выполнен эффект для блока МАГАЗИН►ST305N

Скрипт добавляется в блок ДРУГОЕ►Т123


<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>