+

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

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

Версия 25.01.20
Extended версия

<style>
/* первая карточка */
@media screen and (min-width: 1200px) {
    .tn-elem__1125397791561478264707 {
    	transition: 0.5s;
    	opacity: 0;
    }
    .tn-elem__1125397791470210224069:hover~.tn-elem__1125397791561478264707, .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, .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, .tn-elem__1125397791561478287616:hover {
    	transition: 0.5s;
    	opacity: 1;
    	transform: translate(0px, -20px);
    }
}
</style>
Мinified версия

<style>
@media screen and (min-width: 1200px) {
    .tn-elem__1125397791561478264707, .tn-elem__1125397791561478283185, .tn-elem__1125397791561478287616 {transition: 0.5s;opacity: 0}
    .tn-elem__1125397791470210224069:hover~.tn-elem__1125397791561478264707, .tn-elem__1125397791561478264707:hover,
    .tn-elem__1125397791561477382257:hover~.tn-elem__1125397791561478283185, .tn-elem__1125397791561478283185:hover,
    .tn-elem__1125397791561477384035:hover~.tn-elem__1125397791561478287616, .tn-elem__1125397791561478287616:hover {
    transition: 0.5s;opacity: 1;transform: translate(0px, -20px)}
}
</style>
Made on
Tilda