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-tilda Level UP.
Наглядно показано как создавать подобные вещи и применять их в своих проектах.
Содержание:
1. Создаём все элементы в ZeroBlock
2. Происводим индексацию ссылок
3. Производим каскадную адаптацию группы объектов
4. Изучаем настройки стилей и скрипта

Создаём карточки в ZeroBlock с эффектом заполняющего фона scalebackground при наведении курсора.
Длительность видео: 25 мин
Подписка к видеоинструкции на платной основе
Фрагмент видео
<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>
Made on
Tilda