/* Стили для контейнера изображения */ .model-photo-container { position: relative; overflow: hidden; /* Обрезает контент, выходящий за границы */ } /* Стили для изображения */ .model-photo { width: 100%; /* Установите ширину под ваши нужды */ height: auto; opacity: 0; /* Изначальная прозрачность для эффекта появления */ transform: translateY(20px); /* Начальное смещение */ transition: opacity 1s ease, transform 1s ease; } /* Стили для появления изображения */ .model-photo.loaded { opacity: 1; transform: translateY(0); } /* Стили для эффекта наведения */ .model-photo:hover { filter: blur(2px); /* Эффект размытия при наведении */ transition: filter 0.3s ease; } /* Стили для информации при наведении */ .model-info { position: absolute; bottom: 10px; /* Расположение на нижней части изображения */ left: 10px; right: 10px; background: rgba(0, 0, 0, 0.6); /* Темный фон с прозрачностью */ color: white; padding: 10px; opacity: 0; transition: opacity 0.5s ease; } /* Показ информации при наведении */ .model-photo-container:hover .model-info { opacity: 1; }