Эффект при наведении на карточку в Zero Block

1. Создаем Zero Block
2. Добавляем 3 изображения
3. Создаем SVG маску (того же размера что и изображение) с текстом, кнопкой, пр., с прозрачным либо цветным фоном.
4. Добавляем маски, задаем им ссылки и устанавливаем их над изображениями. Смещаем на 20px вниз.
5. Добавляем HTML-код — T123 и вставляем в него следующий код.
6. Заменяем классы элементов по принципу:
.tn-elem__1125397791561478264707 → класс маски
.tn-elem__1125397791470210224069 → класс изображения
Делаем те же действия для 2 других карточек.

transition: 0.5s — скорость появления маски
<style>
/* первая карточка */
@media screen and (min-width: 1200px) {
    .tn-elem__1125397791561478264707 {
    	transition: 0.5s;
    	opacity: 0;
    }
    .tn-elem__1125397791470210224069:hover~.tn-elem__1125397791561478264707 {
    	transition: 0.5s;
    	opacity: 1;
    	transform: translate(0px, -20px);
    }
    .tn-elem__1125397791561478264707:hover {
    	transition: 0.5s;
    	opacity: 1;
    	transform: translate(0px, -20px);
    }
    /* вторая карточка */
    .tn-elem__1125397791561478283185 {
    	transition: 0.5s;
    	opacity: 0;
    }
    .tn-elem__1125397791561477382257:hover~.tn-elem__1125397791561478283185 {
    	transition: 0.5s;
    	opacity: 1;
    	transform: translate(0px, -20px);
    }
    .tn-elem__1125397791561478283185:hover {
    	transition: 0.5s;
    	opacity: 1;
    	transform: translate(0px, -20px);
    }
    /* третья карточка */
    .tn-elem__1125397791561478287616 {
    	transition: 0.5s;
    	opacity: 0;
    }
    .tn-elem__1125397791561477384035:hover~.tn-elem__1125397791561478287616 {
    	transition: 0.5s;
    	opacity: 1;
    	transform: translate(0px, -20px);
    }
    .tn-elem__1125397791561478287616:hover {
    	transition: 0.5s;
    	opacity: 1;
    	transform: translate(0px, -20px);
    }
}
</style>
Made on
Tilda