8,957
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 82: | Line 82: | ||
} | } | ||
/* | /*photo frames */ | ||
.photo-frame- | /* Стиль для контейнера изображения с рамкой и подписью */ | ||
.photo-frame { | |||
display: inline-block; /* Для корректного центрирования и отображения */ | |||
text-align: center; /* Центрирование подписи */ | |||
margin: 5px 5px; /* Верх/низ: 5px, лево/право: 5px */ | |||
vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать смещений */ | |||
opacity: 0; /* Изначально невидимый */ | |||
animation: fadeIn 1s ease forwards; /* Анимация появления */ | |||
} | } | ||
/* Анимация появления */ | |||
@keyframes fadeIn { | |||
from { | |||
opacity: 0; | |||
transform: translateY(10px); /* Легкий сдвиг вниз */ | |||
} | |||
to { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
} | } | ||
.photo-frame | /* Стиль для самой фотографии */ | ||
.photo-frame img { | |||
border-style: solid; /* Тип рамки */ | |||
border-color: #D02019; /* Красная рамка */ | |||
border-width: 20px 40px 20px 40px; /* Верх: 20px, Право: 40px, Низ: 20px, Лево: 40px */ | |||
display: block; /* Убирает лишние отступы под изображением */ | |||
width: 150px; /* Уменьшенная ширина изображения */ | |||
height: 225px; /* Уменьшенная высота изображения */ | |||
object-fit: cover; /* Обрезает изображение, чтобы оно вписалось в заданные размеры */ | |||
transition: all 0.3s ease; /* Плавный переход для всех изменений */ | |||
} | } | ||
.photo-frame | /* Эффект при наведении */ | ||
.photo-frame img:hover { | |||
border-width: 23px 47px 23px 47px; /* Увеличиваем рамку при наведении */ | |||
transform: scale(1.05); /* Увеличение изображения на 5% */ | |||
} | } | ||