Как сделать карточку с эффектом scalebackground при наведении в ZeroBlock Tilda

We're proud to design great products for life

We create beautiful and magnetic projects. We develop services to help people run their businesses and improve their management systems.

Как сделать карточку с эффектом scalebackground при наведении в ZeroBlock Tilda

1

Создали ZeroBlock

2

Создали в ZeroBlock следующие элементы с привязкой WindowContainer - Top - Center
2.1. Прямоугольный Shape, который будет границей для фона. Задали ему ссылку #zerocardbg1
2.2. Создали Image и добавили туда иконку цветную. Задали ей ссылку #zerocardicon1
2.3. Создали Image и добавили туда иконку со стрелочкой. Задали ей ссылку #zerocardarrow1
2.4. Создали элемента Text - 3 штуки. Каждому задали ссылку #zerocardtext1
(Повторили шаги 2.1 - 2.4 для каждой карточки, меняя индексы ссылок)

3

Добавили код на страницу
Код вставляется в блок ДРУГОЕ►Т123
Для примера был использован один из блоков сайта https://mattermost.com/

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём карточки в ZeroBlock с эффектом заполняющего фона scalebackground при наведении курсора. Длительность видео: 21 мин

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
/*Меняем цвет квадратика при наведении ка карточку*/
.cardmain:hover .colorsquare1 { background: #0058cc}
.cardmain:hover .colorsquare2 { background: #3F8C95}
.cardmain:hover .colorsquare3 { background: #bd5353}
.cardmain:hover .colorsquare4 { background: #719c7d}

/*Цвет квадратика в базе*/
.colorsquare1 { background: rgba(0,88,204,0.2)}
.colorsquare2 { background: rgba(63,140,149,0.2)}
.colorsquare3 { background: rgba(189,83,83,0.2)}
.colorsquare4 { background: rgba(113,156,125,0.2)}

/*Эффект увеличения квадратика при наведении на карточку*/
.cardmain:hover .littlesquare {
    -webkit-transform: scale(19);
    transform: scale(19);
}
/*Меняем цвет текста при наведении на карточку*/
.cardmain:hover .tn-atom {
   color: #ffffff !important;
}
/*Накладываем фильтр на стрелку при наведении на карточку*/
.cardmain:hover .zarrow {
   -webkit-filter: brightness(30);
   -moz-filter: brightness(30);
   filter: brightness(30);
   margin-left: 10px;
}
/*Изменяем прозрачность стрелки при наведении на карточку*/
.cardmain:hover .zarrow .tn-atom {
   opacity:1 !important;
}
/*Настройки для внешнего Shape*/
.cardbg{
    overflow:hidden;
}
/*Характер анимации для стрелочки*/
.zarrow{
    transition-delay: 0.2s;
    transition: all 0.2s;
}
/*Стили для квадратика*/
.littlesquare {
    position: relative;
    height: 82px;
    width: 76px;
    top: -16px;
    left: 26px;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
</style>


<script>
$( document ).ready(function() {
//Прописываем ссылки для наших карточек
 var cardmainclink = [ 0 , 
                   "#myfavoritelink1" ,
                   "#myfavoritelink2" ,
                   "#myfavoritelink3" ,
                   "#myfavoritelink4"
                  ];
//Счтиаем кол-во фонов
var colzerocardbg = $('a[href^= "#zerocardbg"]').length;
  for(let i = 1; i < colzerocardbg+1; i++){
  //Присваиваем класс для фона карточки
  $('[href= "#zerocardbg'+i+'"]').append('<div class = "littlesquare colorsquare'+i+'"></div>').closest('.t396__elem').addClass('cartochki'+i+' cardbg');
  //Присваиваем класс для иконки
  $('[href= "#zerocardicon'+i+'"]').closest('.t396__elem').addClass('cartochki'+i+'');
  //Присваиваем класс для текста
  $('[href= "#zerocardtext'+i+'"]').closest('.t396__elem').addClass('cartochki'+i+'');
  //Присваиваем класс для стрелочки
  $('[href= "#zerocardarrow'+i+'"]').closest('.t396__elem').addClass('cartochki'+i+' zarrow');
  //Создаём родительский класс для всех элементов карточки
  $('.cartochki'+i+'').wrapAll('<div class = "cardmain"><a class="linker" href='+cardmainclink[i]+'></a></div>');
  }; 
  //Удаляем лишние ссылки из ZeroBlock
  $('[href^="#zerocard"]').removeAttr('href');
});  
</script>