• Страница 1 из 1
  • 1
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Раздвижной блок с информацией внутри
Раздвижной блок с информацией внутри
VIP36RUS
Дата: Среда, 16.08.2017, 21:31 | Сообщение 1
Проверенные
Сообщений:159
Награды: 3


Раздвижной блок с информацией внутри, блок не даёт нагрузки на систему. Плавно раскрывается и закрывается, с лёгкостью редактируется.



Демонстрационная страница

В 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>
Прикрепления: 2818724.png(28.9 Kb) · 7727746.png(30.3 Kb)


IPSGuru.RU - Сообщество веб администраторов
VseCraft.Ru - Выживание и отдых в дикой природе
SpproJects.RU - Проект игровых серверов CS 1.6
Страна: (RU)
Kosten
Дата: Среда, 16.08.2017, 21:34 | Сообщение 2
Администраторы
Сообщений:17103
Награды: 55


VIP36RUS, под блок отличное решение.
Страна: (RU)
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Раздвижной блок с информацией внутри
  • Страница 1 из 1
  • 1
Поиск: