[html]<!-- дух не знает, что это такое, если бы знал, что это такое, но дух не знает, что это такое -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<div class="gallean_wrap">
<div class="gallean_first_wrap">
<span>Abracadabra</span>
<em>Ну а как вам такое вот чудо?</em>
</div>
<div class="gallean_second_wrap">
<div class="gallean_scroll">
<span class="header">флуд</span>
<div>единственное ограничение: разжигание конфликтов; если и ругаться, то только сказочно!</div>
</div>
</div>
</div>
<style>
/* css, который не знает, что он такое */
.gallean_wrap {
--g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
--g-text-accent: #EAD807; /* цвет шрифта заголовка на выскальзывающем блоке */
--g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
--g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56); /* тень текста */
--g-padding: 30px; /* отступы от краев */
--g-bg: #FDF8F8; /* фон выскальзывающего блока */
--g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25); /* тень выскальзывающего блока */
--g-calc: 100% - 60px; /* считает ширину или высоту с учетом отступов от краев. в данном случае отступы указаны 30px, сле-но указано 100% - 60px. если указываете отступы 20px, соответственно от 100% отнимаете 40px. математика sssука %) */
}
* {
scrollbar-width: thin;
}
.gallean_wrap {
width: 600px; /* ширина */
height: 300px; /* высота */
overflow: hidden;
position: relative;
margin: auto;
background: url(https://sun9-64.userapi.com/impg/2ve5Wh … type=album); /* фон картинкой */
background-size: cover;
box-sizing: border-box;
padding: var(--g-padding)
}
.gallean_first_wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: var(--g-text-title);
text-shadow: var(--g-text-shadow);
letter-spacing: .1em;
transition: all 2s cubic-bezier(0.72, -0.01, 0, 1);
}
.gallean_first_wrap span {
font: 900 normal 70px inter; /* шрифт shadowsong */
}
.gallean_first_wrap em {
font: 500 normal 13px inter !important; /* шрифт Death, it's shadows, spreads its wings around me. */
}
.gallean_second_wrap {
background: var(--g-bg);
box-shadow: var(--g-box-shadow);
position: absolute;
width: calc(var(--g-calc));
height: calc(var(--g-calc));
top: 30px;
left: 30px;
box-sizing: border-box;
padding: var(--g-padding);
transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s, opacity 1s cubic-bezier(0.72, -0.01, 0, 1) .05s;
transform: scale(2);
opacity: 0
}
.gallean_scroll {
height: 100%;
overflow-y: auto;
padding-right: 10px;
}
.gallean_second_wrap .header {
display: block;
color: var(--g-text-accent);
font: 900 normal 40px inter; /* шрифт long live death */
text-transform: lowercase;
}
.gallean_scroll div {
color: var(--g-base-text);
text-align: justify;
font: 500 12px/150% inter; /* шрифт основного текста*/
}
.gallean_wrap:hover .gallean_first_wrap {
transform: scale(0);
filter: blur(40px)
}
.gallean_wrap:hover .gallean_second_wrap {
transform: scale(1);
opacity: 1;
transition: transform 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s, opacity 1.5s cubic-bezier(0.72, -0.01, 0, 1) .1s;
}
</style>[/html]
