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!
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!
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!
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.

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

Создаём ZeroBlock с карточками в два слоя. Показываем скрытый контент по клику.
Длительность видео: 39 мин
Подписка к видеоинструкции на платной основе
Фрагмент из видеоинструкции
<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