[html]<div id="p15-content" class="post-content">
<div class="htmldemo"><div class="prusheen-some" style="background: url(http://forumupload.ru/uploads/0019/c8/05/5/761786.png); background-size: cover;">
<div class="prusheen-inner">
<div class="prusheen-text">
<span>главная поляна</span>
<div>
В неглубокой песчаной ложбине, куда не может просочиться прохладный ветер, расположился лагерь племени Ветра. Тщательно скрытый зарослями густого утесника, его очень трудно заметить. Несмотря на хорошую внешнюю маскировку, внутри лагеря есть, разве что, кусты да пара ложбинок, служащих палатками. Любое другое племя наверняка не смогло бы смириться со столь открытой местностью. Сами же коты племени Ветра считают иначе. "Мы благодарны предкам за возможность быть чуть ближе к Звездам. И разве может быть что-то прекраснее бесконечного звездного неба над головой?" Утоптанная временем главная поляна является центром всего лагеря. Неподалеку от входа располагается палатка воителей. В противоположной части поляны виднеется каменистая Скала, у подножия которой, в укромной ложбинке находится палатка предводителя. С этой Скалы предводитель созывает соплеменников на собрание и сообщает о важных событиях. Детская, палатка оруженосцев и палатка старейшин расположены в глубине лагеря, так, что бы никакая опасность их не коснулась. Палатка целителя находится вдали от остальных убежищ, так как пряный и яркий аромат разнотравий способны выдерживать долгое время лишь сам целитель и его ученик.
</div></div>
</div>
</div>
<style>
/* css черти чего от вещего духа*/
.prusheen-some {
width: 630px;
height: 445px;
margin: 0;
position: relative;
overflow: hidden
}
.prusheen-text {
width: 450px;
margin: auto;
font: 500 10px/18px ruda; /* шрифт текста в большом блоке */
text-align: justify;
color: #1e1e1e; /* цвет шрифта */
margin-top: 10px;
transition: all 1s cubic-bezier(.87,.11,.27,1.52) 0s}
.prusheen-text > div {
padding: 0 10px 0 10px;
overflow: auto;
height: 190px;
opacity: 0;
transition: all .5s linear 0s}
.prusheen-text > span {
display: block;
text-align: center;
font: 30px merriweather; /* шрифт текста заголовка */
height: 60px;
position: relative;
margin-bottom: 25px}
.prusheen-some:hover .prusheen-inner {
height: 380px;
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>
<link href="https://fonts.googleapis.com/css?family=Ruda:400,500,700&display=swap&subset=cyrillic" rel="stylesheet">
</div>
</div>[/html]