Интерактивная галерея без JS Давайте сегодня разберем, как создать интерактивную галерею изображений с эффектом раскрытия по клику на чистом CSS. HTML: <input type="radio" name="slider" id="c1" checked> <label class="card" for="c1"></label> Основа галереи — группа радиокнопок, где каждая кнопка соответствует своему изображению. Атрибут name="slider" объединяет их в группу, позволяя выбрать только один элемент. CSS: input { display: none; } .card { width: 90px; height: 420px; transition: 0.6s cubic-bezier(.25,.8,.25,1); } ■ Скрываем сами радиокнопки. ■ Задаем базовые размеры. ■ Применяем transition для плавности. Изменение состояния: input:checked + .card { width: 520px; filter: grayscale(0); } Когда радиокнопка активна, соседний лейбл (+) расширяется до 520px и становится цветным. Остальные карточки автоматически сжимаются. Фоновые изображения: [for="c1"] { background-image: url("..."); } Селектор по атрибуту назначает каждой карточке своё изображение. В итоге, радиокнопки управляют состоянием, псевдокласс :checked применяет стили, а transition делает всё плавным. Пример можно найти здесь.