MediaWiki:Common.css: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.css (view source)

Revision as of 02:44, 10 July 2025

1,263 bytes removed ,  10 July
no edit summary
No edit summary
No edit summary
Line 83: Line 83:


/*photo frames */
/*photo frames */
/* Стиль для контейнера изображения с рамкой и подписью */
.photo-frame {
.photo-frame {
     display: inline-block; /* Для корректного центрирования и отображения */
     display: inline-block;
     text-align: center; /* Центрирование подписи */
     text-align: center;
     margin: 5px 5px; /* Верх/низ: 5px, лево/право: 5px */
     margin: 5px;
     vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать смещений */
     vertical-align: top;
     opacity: 0; /* Изначально невидимый */
     opacity: 0;
     animation: fadeIn 1s ease forwards; /* Анимация появления */
     animation: fadeIn 1s ease forwards;
}
}


/* Анимация появления */
.photo-border {
@keyframes fadeIn {
     display: inline-block;
     from {
    border-style: solid;
        opacity: 0;
     border-color: #D02019;
        transform: translateY(10px); /* Легкий сдвиг вниз */
     border-width: 20px 40px 20px 40px;
     }
    transition: all 0.3s ease;
     to {
     background: white; /* Фон рамки */
        opacity: 1;
        transform: translateY(0);
     }
}
}


/* Стиль для самой фотографии */
.photo-border:hover {
.photo-frame img {
     border-width: 23px 47px 23px 47px;
    border-style: solid; /* Тип рамки */
     box-shadow: 0 4px 12px rgba(0,0,0,0.18);
     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 img {
.photo-frame img:hover {
    display: block;
     border-width: 23px 47px 23px 47px; /* Увеличиваем рамку при наведении */
    width: 150px;
     transform: scale(1.05); /* Увеличение изображения на 5% */
    height: 225px;
     object-fit: contain;   /* <--- Ключевой момент! */
     background: white;     /* Заполнит пустое место */
}
}


Retrieved from "https://twentyonewiki.info/index.php/Special:MobileDiff/10803"

Navigation menu