8,957
edits
No edit summary |
No edit summary |
||
Line 82: | Line 82: | ||
} | } | ||
/* | /* Photo frames */ | ||
/* Контейнер рамки */ | |||
.photo-frame { | .photo-frame { | ||
display: inline-block; | display: inline-block; | ||
text-align: center; | text-align: center; | ||
margin: 5px; | margin: 5px 5px; | ||
vertical-align: top; | vertical-align: top; | ||
opacity: 0; | opacity: 0; | ||
animation: fadeIn 1s ease forwards; | animation: fadeIn 1s ease forwards; | ||
} | } | ||
@keyframes fadeIn { | |||
.photo- | from { opacity: 0; transform: translateY(10px);} | ||
display: | to { opacity: 1; transform: translateY(0);} | ||
} | |||
/* Новая обертка для рамки */ | |||
.photo-frame-img { | |||
display: block; | |||
width: 150px; | |||
height: 225px; | |||
object-fit: contain; /* <--- Это важно! */ | |||
background: #fff; /* На всякий случай, чтобы фото не сливалось с рамкой */ | |||
margin: 0 auto; | |||
box-sizing: border-box; | |||
border-style: solid; | border-style: solid; | ||
border-color: #D02019; | border-color: #D02019; | ||
border-width: 20px 40px 20px 40px; | border-width: 20px 40px 20px 40px; | ||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||
} | } | ||
/* Эффект при наведении */ | |||
.photo- | .photo-frame-img:hover { | ||
border-width: 23px 47px 23px 47px; | border-width: 23px 47px 23px 47px; | ||
transform: scale(1.05); | |||
} | } | ||
/* Подпись */ | |||
.photo-frame | .photo-frame .caption { | ||
margin-top: 0.6em; | |||
font-size: 1em; | |||
color: #333; | |||
} | } | ||
/* Media */ | /* Media */ |