Группировка выбранных элементов

Сегодня разберем, как можно визуально группировать выбранные элементы. Если отметить несколько пунктов подряд, они "склеятся" в единый блок, потеряв скругления между собой.

HTML:

<div class="card">
  <label><input type="checkbox">Первый элемент</label>
  <label><input type="checkbox" checked>Второй элемент</label>
  <label><input type="checkbox" checked>Третий элемент</label>
  <label><input type="checkbox">Четвертый элемент</label>
</div>

Каждый label содержит чекбокс и текст. Кликать можно по всей области строки.

Базовое выделение:

label:has(input:checked) {
  background: #d4f7d4;
  border-radius: 8px;
}

Каждый отмеченный label получает зелёный фон и скругление со всех четырёх сторон.

Если выбран сосед сверху:

label:has(input:checked) + label:has(input:checked) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Если текущий label идёт сразу после другого выбранного label - убираем верхние скругления.

Если выбран сосед снизу:

label:has(input:checked):has(+ label input:checked) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

Если после текущего label идёт ещё один выбранный - убираем нижние скругления.

В результате несколько выбранных элементов подряд выглядят как один цельный блок)

Потестить код можно здесь.

Инструменты меняются — проблема вечна)

Интересный фон с линейным градиентом

Давайте разберем, как с помощью простого CSS-градиента сделать красивый фон для блока.

HTML:

<header class="intro">
  <div class="intro-body">
    <h1>Формошлёп</h1>
    <p>Шлёпаем формы и красим кнопки...</p>
  </div>
</header>

Просто блок с контентом.

CSS:

.intro {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

Центрируем наш блок с контентом.

Градиент:

background: linear-gradient(
  45deg,
  #ffcc5c 20%,
  #3c3c3c 20% 50%,
  #ff6f69 50% 80%,
  #96ceb4 80%
);

Это жесткий градиент — переходы между цветами резкие, без плавного смешения.
Каждая пара значений после цвета, задаёт диапазон, который этот цвет занимает:
■ #ffcc5c 20% — желтый от 0% до 20%
■ #3c3c3c 20% 50% — темно-серый от 20% до 50%
■ #ff6f69 50% 80% — розовый от 50% до 80%
■ #96ceb4 80% — зеленый от 80% до 100%

Когда начало одного цвета совпадает с концом предыдущего, граница становится резкой. Именно это создает эффект геометрических цветных полос, а не размытого перехода.

Такой фон отлично подойдет, например, для первого экрана лендинга или какого-нибудь блока для привлечения внимания юзера)

Весь код можно найти здесь.

Анимированное волнистое подчёркивание ссылок на CSS

Нашел еще один интересный трюк - при наведении на ссылку обычная линия превращается в живую волну. Это, конечно, используется нечасто) но все равно, давайте разберем, как это работает.

HTML:

<p>Lorem <a href="#">ipsum dolor</a> sit amet.</p>

CSS:

a {
  background: linear-gradient(to bottom, #ff9800 0%, #ff9800 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  color: #000;
  text-decoration: none;
}

a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
}

В обычном состоянии подчёркивание имитируется через background — тонкая полоска снизу вместо стандартного text-decoration. При hover меняем оранжевую заливку на анимированный SVG-рисунок волнистой линии.

Если закодированный XML привести в человеческий вид, то получим:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'>
  <style>
    .squiggle {
      animation: shift .3s linear infinite;
    }
    @keyframes shift {
      from { transform: translateX(0); }
      to { transform: translateX(-20px); }
    }
  </style>
  <path fill='none' stroke='#ff9800' stroke-width='2' class='squiggle' 
        d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3' />
</svg>

Волнистый путь <path> с кривыми Безье и CSS-анимация, которая сдвигает волну влево ровно на 20px. В момент, когда одна копия уходит влево, следующая уже стоит на её месте. Стык невидим, потому что волна симметрична — и получается бесшовный бесконечный поток.

Такой вот интересный эффект получается)

Пример лежит здесь.

Анимированные карточки на CSS

Давайте сегодня разберём небольшой, но красивый эффект для карточки, когда она при наведении заливается цветом изнутри.

HTML:

<article class="card" style="--clr:#89ec5b">
  <i class="card__icon fa-solid fa-paintbrush"></i>
  <h3>Designing</h3>
  <p>Lorem Ipsum is simply dummy text of the printing industry.</p>
  <a href="#">Read More</a>
</article>

Сама карточка, style="--clr:#89ec5b" - переменная, которая определяет основной цвет карточки.

Иконка:

.card__icon {
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 6px var(--clr);
}

Два слоя box-shadow без blur создают эффект двойной рамки вокруг иконки: сначала зазор цвета фона, потом обводка цветом карточки.

При наведении радиус второго слоя увеличивается до 300px — и тень буквально заполняет всю карточку:

.card:hover .card__icon {
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 300px var(--clr);
}

Кнопка:

.card a {
  background: var(--clr);
  border: 2px solid var(--clr);
  color: #2e2e2e;
}

.card:hover a {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--clr);
}

До hover — залитая кнопка цветом карточки. После — инвертируется: фон тёмный, текст цветной. border-color тоже меняется на тёмный, иначе граница сольётся с цветным фоном карточки.

В итоге, весь эффект держится на трех вещах:
■ CSS-переменная --clr для цвета.
■ box-shadow с большим радиусом как «заливка».
■ overflow: hidden чтобы тень не вылезала.

Такой вот простой, но эффектный трюк с тенью)

Потестить можно здесь.

Масштабное обновление — CodePen 2.0

Популярная «песочница» выкатила масштабное обновление (пока в бете), которое превращает сервис из блокнота в полноценную IDE.

Что изменилось?

■ Файловая система: теперь можно создавать папки, кучу файлов и импортировать их друг в друга. Любой пен — это теперь мини-проект.

■ Система блоков: больше не нужно копаться в настройках, чтобы включить Sass или Tailwind. Просто добавляешь нужный «блок» в проект. Можно комбинировать несколько препроцессоров сразу.

■ Мульти-таскинг: вкладки можно группировать, перетаскивать и открывать несколько редакторов одновременно. Удобно, если верстаешь и правишь JS в разных углах экрана.

■ Движок: редактор стал быстрее, доступнее и обзавелся кучей новых шрифтов и тем.

Если еще не пробовали, попробуйте - https://codepen.io/beta

Раскрываем блок по чекбоксу

Иногда бывает нужно показать дополнительные поля в форме, если юзер поставит галочку в чекбоксе. Рассмотрим, как это можно сделать на чистом CSS.

HTML:

<div class="card">
  <div class="card__header">
    <input type="checkbox" id="open">
    <label for="open" class="card__title">Toggle content</label>
  </div>
  <div class="content">
    <div class="content__inner">
      <!-- доп. поля -->
    </div>
  </div>
</div>

Чекбокс и лейбл находятся в одном контейнере .card__header, а скрываемый блок .content идет следом.

Анимация высоты:

.content {
  display: grid;
  grid-template-rows: 0fr;  /* Начальное состояние — высота 0 */
  transition: grid-template-rows .35s ease;
}

.content__inner {
  overflow: hidden; /* Прячем текст при 0fr */
}

Когда мы применяем grid-template-rows: 0fr, грид сжимает строку до нулевой высоты. Благодаря overflow: hidden контент становится невидимым. Плюс grid-template-rows можно анимировать.

Переключение:

.card__header:has(input:checked) ~ .content {
  grid-template-rows: 1fr;
}

■ .card__header:has(input:checked) — мы ищем заголовок, внутри которого есть отмеченный чекбокс.
■ ~ .content — если такой заголовок найден, применяем стили к соседнему блоку .content, который идет после него.
■ grid-template-rows: 1fr — меняем высоту трека на 1fr (весь доступный контент). Grid плавно анимирует это изменение.

Можно использовать для форм с необязательными блоками: доставка, юрлицо, промокод и т.д.)

Потестить можно здесь.

Эффект темной сетки с виньеткой на чистом CSS

Видели такой фон на современных лендингах и SaaS-продуктах? Тёмный фон, тонкая сетка, виньетка по краям. Давайте разберем, как это можно реализовать.

HTML:

<div class="vignette"></div>

<div class="grid-content">
  <h2>Grid Template</h2>
  <p>Ваш текст здесь...</p>
</div>

Разделяем декоративный слой с затемнением по краям и контент.

Сетка через background-image:

body {
  background-image: 
    linear-gradient(var(--grid) var(--line), transparent var(--line)),
    linear-gradient(90deg, var(--grid) var(--line), transparent var(--line));
  background-size: var(--size) var(--size);
}

Два градиента рисуют горизонтальные и вертикальные линии, а background-size задаёт размер ячейки.

Виньетка:

.vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

Отдельный div поверх фона. fixed + inset: 0 — растягивается на весь экран и не влияет на высоту страницы. pointer-events: none — клики проходят насквозь. Радиальный градиент затемняет края, центр остаётся чистым.

CSS-переменные в :root:

:root {
  --bg: #0a0a0a;
  --grid: rgba(255, 255, 255, 0.08);
  --size: 40px;
  --line: 1px;
}

Все, что нужно настроить — в одном месте. Хочешь синюю сетку покрупнее — меняешь две переменные, а не лезешь в середину кода.

Вот так из простых HTML-тегов и пары CSS-свойств получается стильный и современный интерфейс)

Пример можно глянут тут.

Эффект стопки карточек на чистом CSS

Видели такой эффект, когда секции страницы ведут себя, как стопка физических карточек, которые накладываются друг на друга при скролле? Давайте разберем, как это можно сделать.

HTML:

<section>
  <h2>Section title</h2>
  <p>Lorem Ipsum is simply dummy text of the printing...</p>
</section>
<!-- у нас будет 5 таких карточек -->

Карточки:

section {
  --i: 0;
  width: min(100% - 2rem, 32em);
  margin-inline: auto;
  padding: 2em;
  min-height: 100vh;
  position: sticky;
  bottom: 0;
  translate: calc((2 - var(--i)) * 1em) 0;
  z-index: calc(10 - var(--i));
  scroll-snap-align: start;
}

■ position: sticky + bottom: 0 — фиксирует элемент относительно нижней границы контейнера. При скролле вверх секция «прилипает» к низу вьюпорта, создавая эффект накопления.
■ min-height: 100vh — каждая секция занимает всю высоту экрана.
■ translate: calc((2 - var(--i)) * 1em) 0 — создаёт горизонтальный разброс карточек — веером от правой к левой. --i — кастомное свойство, меняется для каждой секции.
■ z-index: calc(10 - var(--i)) — управляет порядком наложения. У первой секции индекс выше, у последней — ниже. Благодаря этому верхняя карточка всегда поверх.

Назначение переменных --i:

section:nth-child(1) { --i: 0; background: #FFCDD2; }
section:nth-child(2) { --i: 1; background: #F8BBD0; }
section:nth-child(3) { --i: 2; background: #E1BEE7; }
section:nth-child(4) { --i: 3; background: #D1C4E9; }
section:nth-child(5) { --i: 4; background: #C5CAE9; }

Каждой секции задается свой индекс и свой цвет. Индекс участвует в расчетах сдвига и z-index.

Простой, но интересный эффект, который можно использовать для лендингов, портфолио и т.п.)

Посмотреть можно здесь.

Gooey-эффект для бургер-меню на CSS+SVG

Анимация кнопки меню — это мелочь, которая сразу бросается в глаза. Сегодня разберем, как сделать эффект "слипания" элементов без canvas и без JS-библиотек.

HTML:

<div class="burger" id="burger">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Три блока — три полоски будущего крестика.

SVG-фильтр:

<filter id="g">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="g" />
  <feComposite in="SourceGraphic" in2="g" operator="atop" />
</filter>

■ feGaussianBlur — размывает элементы.
■ feColorMatrix — усиливает контраст (делает "слипание").
■ feComposite — накладывает результат обратно.

CSS-анимация:

.burger.active .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-50px, 50px);
}
.burger.active .bar:nth-child(2) {
  transform: rotate(45deg);
}
.burger.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(50px, -50px);
}

■ Первая полоска поворачивается на -45° и сдвигается влево-вниз.
■ Вторая просто поворачивается на 45° — становится центром креста.
■ Третья поворачивается на -45° и сдвигается вправо-вверх.

Небольшая задержка на втором и третьем:

.bar:nth-child(2),
.bar:nth-child(3) {
  transition-delay: 100ms;
}

Без неё все три бара двигаются одновременно и эффект слипания не успевает сработать.

Активация по клику:

const burger = document.getElementById('burger');
burger.onclick = () => burger.classList.toggle('active');

клик → добавляется класс → запускается анимация

В итоге, обычный бургер + SVG-фильтр = необычный визуальный эффект)

Пример код здесь.

Эффект "стопки бумаги" на CSS

Иногда нужно оформить блок как будто это несколько листов, лежащих друг на друге, например, карточка статьи, заметка и т.п. Давайте разберем один из способов реализации.

HTML:

<div class="card">
  <p>Текст...</p>
  <p>Текст...</p>
</div>

Карточка:

.card {
  width: 100%;
  max-width: 600px;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  position: relative;
}

■ padding: clamp(1.5rem, 5vw, 4rem); — адаптивные отступы
■ position: relative — база для псевдоэлементов
■ background, border-radius, box-shadow — задаём один раз, а псевдоэлементы заберут их через inherit

Псевдоэлементы:

.card::before, .card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  box-shadow: inherit;
  border-radius: inherit;
  z-index: -1;
}

■ создаём 2 копии карточки
■ они лежат под основной (z-index: -1)
■ полностью повторяют стиль (inherit)

.card::before {
  transform: rotate(1.5deg) translateY(4px);
}
.card::after {
  transform: rotate(-1.5deg) translateY(-4px);
}

rotate + translateY на каждом псевдоэлементе в разные стороны создают ощущение что листы лежат вразброс.

Получаем довольно простой и элегантный эффект без наворотов)

Пример можно посмотреть здесь.

Интересный вариант CSS-аккордеона

Давайте разберем еще один способ необычной стилизации аккордеона на <details>.

HTML:

<details name="accordion" open style="--bg:#620808; --color:#f4ce74;">
  <summary>
    <span>Location</span>
    <svg class="arrow" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2.5"
         stroke-linecap="round" stroke-linejoin="round">
      <polyline points="6 9 12 15 18 9"/>
    </svg>
  </summary>
  <p>Контент...</p>
</details>

■ <details> — контейнер аккордеона.
■ <summary> — всегда видимый заголовок, по клику открывает/закрывает блок.
■ name="accordion" — заставляет работать группу как настоящий аккордеон (открывается только один).
■ open — по умолчанию блок развёрнут.
■ --bg:#620808; --color:#f4ce74; - стилизация через CSS-переменные.

CSS:

summary {
  display: flex;
  align-items: center;
  list-style: none;
  background: var(--bg);
  color: var(--color);
}
.arrow { transition: 0.2s; }
details[open] .arrow { transform: rotate(180deg); }
p { background: var(--bg); color: var(--color); }

■ display: flex + align-items: center — иконка, текст и стрелка выстраиваются в ряд и выравниваются по вертикали.
■ list-style: none — убирает стандартный треугольник браузера у <summary>.
■ background: var(--bg) и color: var(--color) — берут цвета из переменных, которые мы задали прямо в style на каждом <details>. Одно правило работает для всех пунктов сразу.
■ details[open] .arrow — селектор срабатывает когда блок раскрыт. Браузер автоматически добавляет атрибут open на <details> при клике и убирает при закрытии. Мы просто вешаем на него стиль. transition: 0.2s на .arrow делает поворот плавным.

Вот такая вот интересная идея)

Пример можно посмотреть тут.

Стилизация границы карточки

Сегодня разберем небольшой, но очень интересный прием — карточку с «стеклянным» эффектом.

HTML:

<div class="card">
  <div>
    <h2>Card</h2>
    <h3>Lorem ipsum</h3>
  </div>
  <div>
    <a href="#" id="link1">Button 1</a>
    <a href="#" id="link2">Button 2</a>
  </div>
</div>

Два блока внутри .card, верхний — заголовок, нижний — кнопки.

Карточка:

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 20rem;
  width: 20rem;
  position: relative;
}

Внутренние блоки:

.card > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  width: 100%;
}

Просто делаем аккуратные отступы и вертикальный layout.

Сам эффект:

.card::before {
  content: "";
  background-color: rgba(255, 255, 255, 0.01);
  position: absolute;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(50px);
  clip-path: polygon(
    evenodd,
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    0.3rem 0.3rem,
    calc(100% - 0.3rem) 0.3rem,
    calc(100% - 0.3rem) calc(100% - 0.3rem),
    0.3rem calc(100% - 0.3rem),
    0.3rem 0.3rem
  );
}

■ backdrop-filter: blur() — размывает все, что находится за элементом.
■ С помощью clip-path создаём две фигуры:
■ внешнюю (вся карточка)
■ внутреннюю (чуть меньше)
■ evenodd вырезает середину → получаем «рамку»

В итоге:
■ есть blur.
■ но центр прозрачный.
■ выглядит как стеклянная карточка с границей.

Пример можно найти здесь.

Эффект «наезжающего» футера на CSS

Видели такой прием на современных лендингах, когда футер плавно «наползает» на контент, постепенно размывая его? Давайте разберем как это работает.

HTML:

<section class="hero">
  <div class="card">...</div>
</section>
<footer>...</footer>

Основная секция:

.hero {
  height: 100vh;
  display: grid;
  place-items: center;
  position: sticky;
  top: 0;
}

sticky держит секцию на месте пока скроллишь, но при этом элемент остаётся в потоке документа. Footer просто идет следом и физически наезжает сверху.

Эффект футера из ::before и ::after:

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent 10%,
    rgba(0,0,0,0.8) 40%,
    #000
  );
  z-index: -2;
}

::before — градиент от прозрачного к черному. Создает ощущение что карточка «уходит» под темную поверхность.

footer::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(40px);
  mask-image: linear-gradient(
    rgba(0,0,0,0),
    rgba(0,0,0,0.8) 20%,
    black 30%
  );
  z-index: -1;
}

::after — backdrop-filter: blur() размывает все что находится позади футера. Но блюр применяется не сразу — mask-image делает его постепенным, от прозрачного сверху к полному снизу. Это и создает плавный переход.

z-index: -2 и -1 работают относительно футера, у которого position: relative — так псевдоэлементы уходят за контент, но остаются поверх карточки.

Простой трюк, но визуально делает лендинг на уровень выше)

Пример можно посмотреть здесь.

Анимация «шторка» для форм логина и регистрации

Иногда обычные формы логина выглядят слишком скучно.
Поэтому сегодня разберем эффект, где между формой входа и регистрации плавно ездит цветная «шторка».

HTML:

<div class="card">
  <input type="checkbox" id="tog" class="toggle">

  <div class="curtain"></div>

  <div class="hero panel signup">...</div>
  <div class="hero panel signin">...</div>

  <div class="form panel signup">...</div>
  <div class="form panel signin">...</div>
</div>

Фишка в том, что чекбокс управляет всеми состояниями.
■ Галочка НЕ стоит → показываем регистрацию
■ Галочка стоит → показываем вход

Переключение:

.toggle:checked ~ .hero.signup {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-25%);
}

.toggle:checked ~ .form.signin {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

Когда чекбокс .toggle отмечен :checked, мы «выключаем» одну панель и «включаем» другую.

Шторка

.curtain {
  position: absolute;
  z-index: 2;
  width: 50%;
  background: #8960e2;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.toggle:checked ~ .curtain {
  transform: translateX(100%);
}

Шторка .curtain — это просто большой фиолетовый блок, закрывающий половину карточки. Когда чекбокс активен — шторка уезжает вправо.

Формы:

.form.signup { left: 50%; }
.form.signin { left: 0; opacity: 0; visibility: hidden; }

.form — контейнер с полями, каждый занимает свою половину.
По умолчанию видна только форма регистрации.

Как только чекбокс отмечен:
■ Форма регистрации пропадает.
■ Форма входа появляется.

Анимация:

transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);

Ключевой момент — все transition синхронизированы. Шторка и формы двигаются с одной кривой и за одно время. Создаётся ощущение, что шторка физически «открывает» вторую форму.

Если нужно, допилить адаптив и можно использовать)

Пример, как всегда здесь.

3D-эффект карточки персонажа на CSS

Наткнулся на интересный эффект с карточками в стиле Diablo. Персонаж при наведении, как бы встаёт на пьедестал. Никакого JS — только HTML и CSS. Разбираем)

HTML:

<figure class="card">
  <img src="necro.webp">
  <figcaption>The Necromancer</figcaption>
</figure>

Всего три тега: карточка, картинка и подпись.

Слой 1 — фон ::before
Псевдоэлемент с фоновой картинкой. При ховере уходит назад через 3D-трансформацию:

.card:hover::before {
  filter: brightness(0.3);
  transform: perspective(500px) rotateX(60deg);
}

transform-origin: bottom — складывается от нижнего края, как крышка стола.

Слой 2 — персонаж img
Прибит к низу карточки через place-self: end center. При ховере растет вверх:

.card img {
  place-self: end center;
  height: 100%;
}

.card:hover img {
  height: 270%;
}

object-position: top гарантирует что обрезка идёт снизу, а не сверху.

Слой 3 — плашка figcaption
Спрятана под карточкой — повёрнута на -90° вокруг оси X:

figcaption {
  transform: perspective(500px) translateY(100%) rotateX(-90deg);
  transform-origin: top;
}

При ховере поворачивается и выезжает снизу как пьедестал:

.card:hover figcaption {
  transform: perspective(500px) translateY(100%) rotateX(-30deg);
}

Классный эффект получается, отлично подойдет для галереи персонажей, карточки товаров, интерактивных списков героев — везде, где хочется добавить глубины одним ховером)

Пример можно глянуть здесь.