Раздвижной блок с информацией внутри, блок не даёт нагрузки на систему. Плавно раскрывается и закрывается, с лёгкостью редактируется.
Демонстрационная страница
В CSS добавляем
Код
/********************************
* Раздвижной блок IPSGuru.Ru
* ipsguru.ru
********************************/
.ipsgblok1 {
position:relative;
width:300px;
height:300px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.ipsgblok1 p,.ipsgblok1 h2 {
color:#fff;
padding:10px;
left:-20px;
top:3px;
position:relative
}
.ipsgblok1 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.ipsgblok1 h2 {
font-size:20px;
line-height:24px;
margin:0;
font-family:'Lato'
}
.effect img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:0px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}
.effect img.top:hover {
bottom:-96px;
padding-top:100px
}
h2.zero,p.zero {
margin:0;
padding:0
}
В блок или нужное вам место
Код
<ul class="ipsgblok1 effect">
<h2 class="zero">Доступ в премиум раздел.</h2>
<p class="zero">Тут можно описание добавить.</p>
<img class="top" src="https://ipsguru.ru/uploads/set_resources_27/premium-sms.png" alt=""/>
</ul>
