Как сделать карточки в два слоя в ZeroBlock в Tilda
 
We work for your joy and happiness!
+1 123 456 78 90
hello@monomo.com
RETAINING WALLS WITH PROVEN ENGINEERING ...
Redi-Rock® is a large block wall system created by engineers, for engineers. Click below to get the retaining wall design and engineering resources you need to get started on your next retaining wall!
Tools for Engineers
A WALL FOR STRONG MINDS AND WEAK BACKS ...
Redi-Rock is a simple, repeatable system that is easy on your back. Because these blocks weigh about a ton each, they are set using an excavator and require minimal effort from you! Ready to give your back a break? Click below to get more details on installing Redi-Rock!
Resources for Installers
BECAUSE SIZE MATTERS ...
If you're a developer, chances are you need to maximize the usable space on your site. Redi-Rock can help you do that - while looking awesome and staying competitive on price. Click below to get more details on retaining walls for developments!
Info for Developers
MAXIMIZE YOUR CURB APPEAL ...
Retaining walls create usable space for your family to build a home or create an outdoor living area. And it will look way cooler than anything your neighbors have! Get ideas for your residential retaining wall project by clicking below.
Residential Wall Info
ENGINEERS
INSTALLERS
DEVELOPERS
HOMEOWNERS

Как сделать карточки в два слоя в ZeroBlock в Tilda

1
Создали ZeroBlock и добавили в него контент по порядку:
1.1 Создали 4-красных заголовка
1.2 Создали 4-е описания
1.3 Создали 4-е кнопки
1.4 Создали 4-е красных иконки крестика и поверх них наложили 4-е серых иконки крестика и задали серым иконкам ссылку #closeicon
Для серых иконок создали step-by-step animation - Hover - Opacity 0
1.5 Создали 4 shape объекта и поместили в них фоновые фото. Задали им ссылку #bgfon
1.6 Создали 4 белых текстовых заголовка, поместили каждый поверх нужного фото, задали им ссылку #cardtext
1.7 Создали 4 прозрачных shape, сделали их в размер shape c фоном и поместили над каждым фоном и белым текстом. Задали им ссылку #front
2
Адаптировали ZeroBlock
3
Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём ZeroBlock с карточками в два слоя. Показываем скрытый контент по клику.
Длительность видео: 27 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<style>
/*Стиль для наложения красного оттенка*/
    .blend {
    background-color: red;
    background-blend-mode: multiply;
}
</style>

<script>
$( document ).ready(function(){
//Присваиваем классы для нужных элементов    
  $( "[href = '#front']" ).addClass('frontfon maincard');
  $( "[href = '#bgfon']" ).addClass('bgfon maincard');
  $( "[href = '#cardtext']" ).addClass('cardtext maincard');
  $( "[href = '#closeicon']" ).addClass('closeicon');
//При клике на карточку  
    $( ".frontfon" ).click(function(event){ 
      //Вычисляем номер карточки         
     var number = $(".frontfon").index(this);
     //Скрываем элементы переднего плана
      $(".frontfon:eq("+number+")").parent('.tn-elem').hide();    
      $(".bgfon:eq("+number+")").parent('.tn-elem').hide();  
      $(".cardtext:eq("+number+")").hide();
      event.preventDefault();
   });
//При клике на иконку   
   $( ".closeicon" ).click(function(event){ 
      //Вычисляем номер карточки         
     var number = $(".closeicon").index(this);
      //Показываем элементы перендего плана
      $(".frontfon:eq("+number+")").parent('.tn-elem').show();    
      $(".bgfon:eq("+number+")").parent('.tn-elem').show();  
      $(".cardtext:eq("+number+")").show();  
      event.preventDefault();
   });

//При наведении уарточку
     $( ".frontfon" ).hover(function(){ 
	 //Вычисляем её номер
	 var numberhov = $(".frontfon").index(this);
	 //Добавляем эффект красного
	 $(".bgfon:eq("+numberhov+")").addClass('blend');
	  }, function(){ 
	 //Удаляем эффект красного
	 $(".bgfon").removeClass('blend');
	  });
});
</script>
Made on
Tilda