[html]<div id="p3-content" class="post-content">
<div class="htmldemo"><div class="prusheen-some" style="background: url(https://forumupload.ru/uploads/0019/c8/05/5/304464.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-text > span:after {
content: "";
background: #555; /* цвет полосочки разделителя */
display: block;
height: 1px;
width: 100px;
position: absolute;
left:40%;
bottom: 0}
.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]