8,957
edits
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
.image-frame { | .image-frame { | ||
display: inline-block; | display: inline-block; | ||
border-left: 12px solid #c72a37; | |||
border-left: | border-right: 12px solid #c72a37; | ||
border-right: | border-top: 5px solid #c72a37; | ||
border-top: | border-bottom: none; | ||
border- | border-radius: 22px 22px 0 0; | ||
background: | background: none; | ||
margin: 16px auto 0 auto; | |||
box-shadow: 0 | box-shadow: 0 3px 16px rgba(70,15,25,0.06); | ||
transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1), opacity 0.7s cubic-bezier(.22,1,.36,1); | |||
transition: | |||
opacity: 0; | opacity: 0; | ||
transform: scale(0.96) translateY( | transform: scale(0.96) translateY(24px); | ||
animation: frameIn | animation: frameIn 0.9s cubic-bezier(.22,1,.36,1) forwards; | ||
max-width: 330px; | |||
max-width: | |||
} | } | ||
@keyframes frameIn { | @keyframes frameIn { | ||
to { | to { | ||
Line 27: | Line 22: | ||
} | } | ||
} | } | ||
.image-frame:hover, .image-frame:focus-within { | .image-frame:hover, .image-frame:focus-within { | ||
transform: scale(1. | transform: scale(1.05) translateY(-3px); | ||
box-shadow: 0 | box-shadow: 0 9px 24px rgba(140,20,30,0.12), 0 2px 9px rgba(0,0,0,0.10); | ||
z-index: | z-index: 2; | ||
} | } | ||
/* | /* Фото */ | ||
.framed-img, .image-frame img { | .framed-img, .image-frame img { | ||
display: block; | display: block; | ||
max-width: | max-width: 100%; | ||
margin: 0 | margin: 0; | ||
border-radius: | border-radius: 12px 12px 0 0; | ||
box-shadow: | box-shadow: none; | ||
} | } | ||
/* | /* Чёрная подложка для подписи */ | ||
.image-caption { | .image-caption { | ||
font-size: 1. | background: #181217; | ||
margin | border-bottom: 6px solid #c72a37; | ||
border-left: 12px solid #c72a37; | |||
border-right: 12px solid #c72a37; | |||
border-radius: 0 0 22px 22px; | |||
font-size: 1.10em; | |||
margin: 0; | |||
padding: 10px 0 7px 0; | |||
color: #e0a6b4; | color: #e0a6b4; | ||
letter-spacing: .02em; | letter-spacing: .02em; | ||
font-family: 'Segoe UI', 'Arial', sans-serif; | font-family: 'Segoe UI', 'Arial', sans-serif; | ||
text-align: center; | text-align: center; | ||
box-shadow: 0 1.5px 5px rgba(0,0,0,0.03); | |||
} | } | ||