8,674
edits
No edit summary |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
/*photo frames */ | /*photo frames */ | ||
/* Стиль для контейнера ряда фотографий */ | |||
.photo-row { | |||
display: flex; /* Используем flexbox для ряда */ | |||
justify-content: center; /* Центрируем фотографии по горизонтали */ | |||
flex-wrap: wrap; /* Если фотографии не помещаются, они переносятся на следующую строку */ | |||
gap: 10px; /* Отступ между фотографиями (суммарно 10px + 10px = 20px между рамками) */ | |||
margin: 0 auto; /* Центрируем сам контейнер на странице */ | |||
} | |||
/* Стиль для контейнера изображения с рамкой и подписью */ | /* Стиль для контейнера изображения с рамкой и подписью */ | ||
.photo-frame { | .photo-row .photo-frame { | ||
display: inline-block; /* | display: inline-block; /* Оставляем inline-block внутри flex-контейнера */ | ||
text-align: center; /* Центрирование подписи */ | text-align: center; /* Центрирование подписи */ | ||
margin: 5px | margin: 5px 0; /* Убираем боковые отступы, так как используем gap в photo-row */ | ||
vertical-align: top; /* Выравнивание по верхнему краю | vertical-align: top; /* Выравнивание по верхнему краю */ | ||
opacity: 0; /* Изначально невидимый */ | opacity: 0; /* Изначально невидимый */ | ||
animation: fadeIn 1s ease forwards; /* Анимация появления */ | animation: fadeIn 1s ease forwards; /* Анимация появления */ | ||
Line 23: | Line 32: | ||
/* Стиль для самой фотографии */ | /* Стиль для самой фотографии */ | ||
.photo-frame img { | .photo-row .photo-frame img { | ||
border-style: solid; /* Тип рамки */ | border-style: solid; /* Тип рамки */ | ||
border-color: #D02019; /* Красная рамка */ | border-color: #D02019; /* Красная рамка */ | ||
Line 35: | Line 44: | ||
/* Эффект при наведении */ | /* Эффект при наведении */ | ||
.photo-frame img:hover { | .photo-row .photo-frame img:hover { | ||
border-width: | border-width: 25px 50px 25px 50px; /* Увеличиваем рамку при наведении */ | ||
transform: scale(1.05); /* Увеличение изображения на 5% */ | transform: scale(1.05); /* Увеличение изображения на 5% */ | ||
} | } | ||
/* Стиль для подписи */ | /* Стиль для подписи */ | ||
.photo-frame .caption { | .photo-row .photo-frame .caption { | ||
background: none; /* Без фона */ | background: none; /* Без фона */ | ||
font-size: 14px; /* Размер шрифта подписи */ | font-size: 14px; /* Размер шрифта подписи */ | ||
margin-top: 5px; /* Отступ сверху от изображения */ | margin-top: 5px; /* Отступ сверху от изображения */ | ||
color: #000; /* Цвет текста подписи (черный) */ | color: #000; /* Цвет текста подписи (черный) */ | ||
} | |||
/* Подсветка центральной фотографии для ряда из 3 фотографий */ | |||
.photo-row.three-photos .photo-frame:nth-child(2) img { | |||
width: 170px; /* Увеличиваем ширину центральной фотографии */ | |||
height: 255px; /* Увеличиваем высоту центральной фотографии */ | |||
border-color: #FF4040; /* Более яркий оттенок красного для рамки */ | |||
border-width: 25px 50px 25px 50px; /* Рамка чуть толще */ | |||
} | |||
/* Подсветка центральных фотографий для ряда из 4 фотографий */ | |||
.photo-row.four-photos .photo-frame:nth-child(2) img, | |||
.photo-row.four-photos .photo-frame:nth-child(3) img { | |||
width: 170px; /* Увеличиваем ширину центральных фотографий */ | |||
height: 255px; /* Увеличиваем высоту центральных фотографий */ | |||
border-color: #FF4040; /* Более яркий оттенок красного для рамки */ | |||
border-width: 25px 50px 25px 50px; /* Рамка чуть толще */ | |||
} | } | ||