Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как сделать карточку с эффектом 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.
Read More ...
USE CASE
Atlasian
Migrate from Hipchat and integrate Mattermost with Atlassian products.
USE CASE
Compliance
Pull all conversations into one location to easily implement a corporate compliance program.
USE CASE
Healthcare
Achieve control over communications and increase productivity without compromising on security.
USE CASE
Government
Rapidly communicate and adapt to new challenges and maintain privacy and security.

Как сделать карточку с эффектом 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>
Made on
Tilda