<link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rouge+Script&display=swap" rel="stylesheet">

<!-- хтмл черти-чего от вещего духа-->

<div class="prusheen-some" style="background: url(https://forumstatic.ru/files/001a/ae/03/64471.jpg)">
  <div class="prusheen-inner">
    <div class="prusheen-text">
      <span>Shadowsong</span>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis ipsum purus, ut facilisis eros blandit eu. Quisque fringilla iaculis pulvinar. Vivamus odio turpis, rhoncus eget nulla rhoncus, tempus ultrices dui. Maecenas aliquam rhoncus leo, ac mollis est egestas id. In vel elementum nulla. Quisque pharetra dapibus purus, non eleifend elit mollis id. Aliquam vel ligula nec nisl porta efficitur. Mauris vitae aliquet ante. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras imperdiet eu neque in finibus. Ut sed ligula urna. Sed euismod nibh neque, vitae porta odio imperdiet sagittis.

Cras facilisis dui sodales orci fermentum, vitae volutpat leo faucibus. In non dolor eros. Sed facilisis, metus at egestas rhoncus, lorem ex hendrerit libero, quis pretium risus orci eget velit. Etiam euismod, lacus et venenatis facilisis, purus purus efficitur dui, a placerat ante dui id est.
      </div></div>
  </div>
</div>
 
<style>
/* css черти чего от вещего духа*/

.prusheen-some {
width: 500px;
height: 600px;
margin: auto;
position: relative;
}

.prusheen-inner {
background: #f5f5f5; /* цвет белой подложки */
width:500px;
height: 300px;
position: absolute;
bottom: -1px;
left: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 50%);
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text {
width: 350px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 150px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}

.prusheen-text > div {
column-count: 2; /* делает две колонки */
column-gap: 15px; /* расстояния между колонками */
overflow-y: auto;
height: 270px;
opacity: 0;
transition: all .5s linear 0s}

.prusheen-text > span {
display: block;
text-align: center;
font: 40px rouge script; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}

.prusheen-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:35%;
bottom: 0}

.prusheen-some:hover .prusheen-inner {
height: 450px;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%,0% 0%);}
.prusheen-some:hover .prusheen-text {margin-top: 40px}
.prusheen-some:hover .prusheen-text > div {opacity: 1;
transition: all 1s linear .5s}
</style>