[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans&display=swap" rel="stylesheet">
<style>
.header-title {
text-align: center; /* Центрирование текста */
font-family: 'Oranienbaum', Tahoma, serif; /* Шрифт заголовка */
font-size: 24px; /* Размер шрифта */
color: #ffc072; /* Цвет заголовка */
margin: 0; /* Убираем отступы */
}
.shrama {
--shm0: 926px; /* ширина рамы-ограничителя */
--smp0: 270px; /* максимальная ширина карточки */
--shh1: 270px; /* высота блока */
--smp1: 30px; /* внутренний отступ от краев */
--clrp: #b6b4b1; /* цвет внутреннего текста */
--clrt: 1em; /* размер внутреннего текста */
--clrta: #ffc072; /* цвет имени */
--clrba: #949494; /* цвет краткого описания */
}
.shrama {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center; /* Центрование блоков */
width: 100%;
max-width: var(--shm0);
margin-left: 0px;
}
.shrama * {
box-sizing: border-box;
}
.ship18 {
display: inline-block;
position: relative;
width: calc(50% - 16px); /* Два блока в строке (с учетом отступов) */
max-width: var(--smp0);
height: var(--shh1);
margin: 4px; /* Равный отступ вокруг блоков */
font-size: var(--clrt);
font-family: Tahoma, Verdana, sans-serif;
overflow: hidden;
text-align: center; /* Центрирование текста */
}
/*** блок с картинкой shipovnik ***/
.shins {
background: 50% 50% no-repeat;
background-size: cover;
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
filter: grayscale(1);
mix-blend-mode: multiply;
opacity: 1;
}
/*** блок с подложкой-затемнением ***/
.shtext {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
position: absolute;
box-sizing: border-box;
padding: calc(var(--smp1) * 1.5) var(--smp1) var(--smp1);
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0);
transition: background 0.9s 0.5s;
}
.shtext:hover {
background: rgba(0, 0, 0, 0.7);
transition: background 0.95s;
}
.shtext p {
overflow: auto;
padding: 0 6px 0 0 !important;
line-height: 130% !important;
text-align: center;
box-sizing: border-box;
width: 100%;
text-shadow: 0 1px 3px #000;
color: var(--clrp);
}
.shtext p,
.shtext:hover p:nth-child(2) {
max-height: calc(var(--shh1) - var(--smp1) * 4.5);
}
/*** подробный текст отношений-описаний ***/
.shtext p:nth-child(2) {
background: transparent;
transform: scale(0);
opacity: 0;
transition: all 0.6s 0s;
}
.shtext:hover p:nth-child(2) {
opacity: 1;
height: auto;
transform: scale(1);
transition: all 0.6s 0.4s;
}
.shtext p::-webkit-scrollbar {
width: 3px;
height: 3px;
background-color: transparent;
}
.shtext p::-webkit-scrollbar-thumb {
background: rgba(134, 134, 134, 0.35);
}
/*** Имя и краткое описание ***/
.shtext p:first-child,
.shtext p:last-child {
width: calc(100% - var(--smp1) * 2);
}
.shtext p:first-child,
.shtext p:first-child a {
font-family: 'Oranienbaum', Tahoma, serif;
font-size: 18px;
text-transform: uppercase;
color: var(--clrta) !important;
}
.shtext p:first-child a:hover {
filter: brightness(1.2);
}
.shtext p:first-child {
transition: all 2s;
position: absolute;
text-align: center;
top: calc(var(--shh1) - var(--smp1) * 3);
transition: top 0.65s 0.2s;
}
.shtext p:last-child {
font-family: 'PT Sans', Tahoma, sans-serif;
font-size: 11px;
position: absolute;
text-align: center;
top: calc(var(--shh1) - var(--smp1) * 1.8);
color: var(--clrba);
transition: top 0.5s 0.1s;
}
.shtext:hover p:first-child {
position: absolute;
top: var(--smp1);
transition: top 0.7s 0.1s;
}
.shtext:hover p:last-child {
position: absolute;
top: calc(var(--shh1) - var(--smp1) * 1.2);
transition: top 0.6s 0.1s;
}
</style>
<div class="shrama"> <!--- START --->
<!----- ПЕРВЫЙ ПЕРСОНАЖ ----->
<div class="ship18" style="background: #6a6a6a;">
<div class="shins" style="background-image: url(https://forumupload.ru/uploads/001c/3c/e7/4/778616.jpg);"></div>
<div class="shtext">
<p>РАТУША</p>
<p>Центром города неизменно остается главная улица, которая, как нить, связывает воедино все его части. В центре возвышается ратуша — величественное здание, хоть и видавшее виды, но по-прежнему гордо возвышающееся над другими постройками. Ее фасад, выложенный потемневшими от времени кирпичами, увенчан старинной башней с часами, которые, кажется, отмеряют время по-своему, немного не в такт современности. Здесь принимаются решения, обсуждаются городские проблемы, а по пятницам, как и десятилетия назад, проводятся собрания, на которые приходят почти все жители.</p>
<p>главная улица</p>
</div>
</div>
<!----- ВТОРОЙ ПЕРСОНАЖ ----->
<div class="ship18" style="background: #6a6a6a;">
<div class="shins" style="background-image: url(https://forumupload.ru/uploads/001c/3c/e7/4/778616.jpg);"></div>
<div class="shtext">
<p>РАТУША</p>
<p>Центром города неизменно остается главная улица, которая, как нить, связывает воедино все его части. В центре возвышается ратуша — величественное здание, хоть и видавшее виды, но по-прежнему гордо возвышающееся над другими постройками. Ее фасад, выложенный потемневшими от времени кирпичами, увенчан старинной башней с часами, которые, кажется, отмеряют время по-своему, немного не в такт современности. Здесь принимаются решения, обсуждаются городские проблемы, а по пятницам, как и десятилетия назад, проводятся собрания, на которые приходят почти все жители.</p>
<p>главная улица</p>
</div>
</div>
<!----- ТРЕТИЙ ПЕРСОНАЖ ----->
<div class="ship18" style="background: #6a6a6a;">
<div class="shins" style="background-image: url(https://forumupload.ru/uploads/001c/3c/e7/4/778616.jpg);"></div>
<div class="shtext">
<p>РАТУША</p>
<p>Центром города неизменно остается главная улица, которая, как нить, связывает воедино все его части. В центре возвышается ратуша — величественное здание, хоть и видавшее виды, но по-прежнему гордо возвышающееся над другими постройками. Ее фасад, выложенный потемневшими от времени кирпичами, увенчан старинной башней с часами, которые, кажется, отмеряют время по-своему, немного не в такт современности. Здесь принимаются решения, обсуждаются городские проблемы, а по пятницам, как и десятилетия назад, проводятся собрания, на которые приходят почти все жители.</p>
<p>главная улица</p>
</div>
</div>
<!----- ЧЕТВЕРТЫЙ ПЕРСОНАЖ ----->
<div class="ship18" style="background: #6a6a6a;">
<div class="shins" style="background-image: url(https://forumupload.ru/uploads/001c/3c/e7/4/778616.jpg);"></div>
<div class="shtext">
<p>РАТУША</p>
<p>Центром города неизменно остается главная улица, которая, как нить, связывает воедино все его части. В центре возвышается ратуша — величественное здание, хоть и видавшее виды, но по-прежнему гордо возвышающееся над другими постройками. Ее фасад, выложенный потемневшими от времени кирпичами, увенчан старинной башней с часами, которые, кажется, отмеряют время по-своему, немного не в такт современности. Здесь принимаются решения, обсуждаются городские проблемы, а по пятницам, как и десятилетия назад, проводятся собрания, на которые приходят почти все жители.</p>
<p>главная улица</p>
</div>
</div>
</div>
[/html]
