[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>фэнтези, фантастика</span>
      <em>март</em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
      <span class="header">Преференции:</span>
        <div>● 400 филингов в профиль и специальная награда;<br>
● иммунитет от постового списка на следующий календарный месяц;<br>
● всеобъемлющая любовь. </div>
      </div>
    </div>
  </div>

<style>
/* css, который не знает, что он такое */
.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #40200B;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --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);  /* тень выскальзывающего блока */
}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  position: relative;
  margin: auto;
  background: url(https://i.postimg.cc/NFKQ7rBy/R2jHcWT.png);  /* фон картинкой */
  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: 550px;
  height: 250px;
  top: 25px;
  left: 25px;
  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: 90%;
  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]

[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>детективные истории</span>
      <em>июнь</em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
  <span class="header">Сеттинги:</span>
  <div>любые, где есть намек на детективную составляющую. иначе говоря, следствие вели колобки, разгадывали загадки и все такое.</div>
      <span class="header">Преференции:</span>
        <div>● 400 филингов в профиль и специальная награда;<br>
● иммунитет от постового списка на следующий календарный месяц;<br>
● всеобъемлющая любовь. </div>
      </div>
    </div>
  </div>

<style>.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #142507;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #f1f6f2;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
display: block;
position: relative;
margin: auto;}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  display: block;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/0015/e5/b7/2/702112.png);  /* фон картинкой */
  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: 550px;
  height: 250px;
  top: 25px;
  left: 25px;
  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: 90%;
  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]

[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>фольклор</span>
      <em>август</em>
    </div>
    <div class="gallean_second_wrap">
      <div class="gallean_scroll">
  <span class="header">Какой?</span>
  <div>всевозможный.</div>
      <span class="header">Преференции:</span>
        <div>● 400 филингов в профиль и специальная награда;<br>
● иммунитет от постового списка на следующий календарный месяц;<br>
● всеобъемлющая любовь. </div>
      </div>
    </div>
  </div>

<style>.gallean_wrap {
  --g-text-title: #FFFFFF; /* цвет шрифта на первом блоке */
  --g-text-accent: #142507;  /* цвет шрифта заголовка на выскальзывающем блоке */
  --g-base-text: #4E4E4E; /* цвет шрифта основного текста на выскальзывающем блоке */
  --g-text-shadow: 1px 1px 4px rgba(44, 46, 51, 0.56);  /* тень текста */
  --g-padding: 30px;  /* отступы от краев */
  --g-bg: #f1f6f2;  /* фон выскальзывающего блока */
  --g-box-shadow: -10px -10px 20px rgba(0, 0, 0, 0.14), 4px 4px 10px rgba(0, 0, 0, 0.25);  /* тень выскальзывающего блока */
display: block;
position: relative;
margin: auto;}

* {
  scrollbar-width: thin;
}

.gallean_wrap {
  width: 600px; /* ширина */
  height: 300px;  /* высота */
  overflow: hidden;
  display: block;
  position: relative;
  margin: auto;
  background: url(https://forumupload.ru/uploads/0015/e5/ … 568253.png);  /* фон картинкой */
  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: 550px;
  height: 250px;
  top: 25px;
  left: 25px;
  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: 90%;
  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]