В фотоальбоме можно такие карточки сделать 📸 Перед использованием промпта — в настройках модуля поставьте 3 колонки для материалов Промпт, который использовала: Создай современную и адаптивную карточку фотографии на HTML + CSS. Требования:
- 1. Карточка
- * Максимальная ширина: 500–600px, 100% по ширине родителя, с мягкими скруглёнными углами (border-radius: 16px).
- * Лёгкая тень (box-shadow: 0 4px 12px rgba(0,0,0,0.1)).
- * При наведении — плавное увеличение масштаба (transform: scale(1.03)) и усиление тени.
- 2. Изображение
- * Растянуто на всю ширину карточки, высота фиксированная (например 300px), object-fit: cover.
- * Скруглённые углы совпадают с карточкой.
- * Для картинки используй $FULL_PHOTO_DIRECT_URL$, для клика по карточке – ссылку на LIGHTBOX версию
- 3. Плашка с информацией
- * Находится поверх изображения, закреплена снизу (position: absolute; bottom: 0; left: 0; right: 0).
- * Фон контрастный (например, rgba(0,0,0,0.6)), текст белый.
- * Содержимое выравнено по центру одной строкой (display: flex; justify-content: space-around; align-items: center;).
- * Иконки (👁, 💬, ⭐️) и текст должны быть на одной линии, не переноситься.
- * Иконка комментариев и просмотра должны быть кликабельны но не отличаться стилем друг от друга. Комментарии вести на комментарии, просмотр – на страницу материала.
- 4. Название фотографии
- * Либо фиксировано сверху полупрозрачной плашкой, либо появляется при наведении плавно (opacity: 0 → 1).
- * Шрифт крупнее и жирный, чтобы было легко читать.
- 5. Анимация при наведении
- * Плавная анимация: увеличение картинки и проявление названия.
- * Транзишн: transition: all 0.3s ease-in-out.
- 6. Гибкость кода
- * Цвета, высота картинки, радиус скругления, шрифт — легко меняются.
- * Поддержка мобильных устройств (адаптивность).
Выведи чистый HTML+CSS в двух разных блоках для вставки.
|
