Как сделать карточку с эффектом 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>').parent('.t396__elem').addClass('cartochki'+i+' cardbg');
  //Присваиваем класс для иконки
  $('[href= "#zerocardicon'+i+'"]').parent('.t396__elem').addClass('cartochki'+i+'');
  //Присваиваем класс для текста
  $('[href= "#zerocardtext'+i+'"]').parent('.t396__elem').addClass('cartochki'+i+'');
  //Присваиваем класс для стрелочки
  $('[href= "#zerocardarrow'+i+'"]').parent('.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>
Atlasian
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Complance
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Healthcare
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Government
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Made on
Tilda