8,648
edits
No edit summary |
No edit summary |
||
Line 4: | Line 4: | ||
display: inline-block; /* Для корректного центрирования и отображения */ | display: inline-block; /* Для корректного центрирования и отображения */ | ||
text-align: center; /* Центрирование подписи */ | text-align: center; /* Центрирование подписи */ | ||
margin: 5px 5px; /* Верх/низ: | margin: 5px 5px; /* Верх/низ: 5px, лево/право: 5px */ | ||
vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать смещений */ | vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать смещений */ | ||
opacity: 0; /* Изначально невидимый */ | |||
animation: fadeIn 1s ease forwards; /* Анимация появления */ | |||
} | |||
/* Анимация появления */ | |||
@keyframes fadeIn { | |||
from { | |||
opacity: 0; | |||
transform: translateY(10px); /* Легкий сдвиг вниз */ | |||
} | |||
to { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
} | } | ||
Line 17: | Line 31: | ||
height: 225px; /* Уменьшенная высота изображения */ | height: 225px; /* Уменьшенная высота изображения */ | ||
object-fit: cover; /* Обрезает изображение, чтобы оно вписалось в заданные размеры */ | object-fit: cover; /* Обрезает изображение, чтобы оно вписалось в заданные размеры */ | ||
transition: all 0.3s ease; /* Плавный переход для всех изменений */ | |||
} | |||
/* Эффект при наведении */ | |||
.photo-frame img:hover { | |||
border-width: 10px 20px 10px 20px; /* Уменьшаем рамку при наведении */ | |||
border-color: #FF4040; /* Более светлый оттенок красного */ | |||
transform: scale(1.05); /* Увеличение изображения на 5% */ | |||
} | } | ||