» »

Раздвижные вкладки под информацию на CSS

Раздвижные вкладки под информацию на CSS

Здесь можно назвать материал как раздвижной блок или вкладки, где при наведении курсора будет эффект на появление любой информации на сайте. Работает просто, вы ставите изображение по тематике, что будет внутри написано и пользователи или гости просто наводят на картинку, чтоб перейти. Но здесь происходит эффект и изображение съезжает в низ и появляется окно в которой как раз будет любая информация, где можно поставить ссылку на переход.

Это может быть как внутри сайта, как пример вы создали на форуме актуальную тему и вывели ее на главную страницу в блоке. Но также не исключаю под рекламный блок, что собственно говоря в таком же режиме будет работать. Все создано на чистых стилях, здесь только идет ссылка на снимок, который безусловно должен быть яркий и заметный, для того, чтоб как можно больше его заметили. Также он похоже на блок с переворотом, что тоже там несет свое описание, только эффект и ширина другая.

У каждого сайта свой размер блока в контейнере, что здесь в CSS выставляем или подгоняем его под размер. Все очень просто в настройке этот материал, также открытие окна, вы сами делаете, меньше или больше, все будет зависеть, что там размещено будет, так как можно небольшую картину поставить.

Рассмотрим работу материала, что здесь блок будет по умолчанию.

Раздвижной блок для сайта

Это уже срабатываем эффект и появляется описание, когда был наведен клик.

Блок с эффектом раскрытие для сайта

Приступаем к установке:

В админ панели в CSS прописать стили:

Код
.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">ZORNER.RU под H2</h2>
  <p class="zero">Скрипты и шаблоны uCoz на сайте zornet.tu</p>
<img class="top" src="http://zornet.ru/Aben/ABGEA/IfeTSxC8.jpg" alt=""/>
</ul>

Как примерно работает вы можете посмотреть на демонстраций на сайте, где только описание, но сами можете понять. что можно еще разместить.

Спасибо большое пользователю VIP36RUS который предоставил материал на сайт.
16.08.2017 Просмотров: 423 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Critic©
Critic© 17.08.2017 18:251
0
Что то много скриптов на рекламу идет, но этот не нахожу под рекламу, хотя и можно и наверно был для этого сделан. Но можно что то свое разместить в нутри сайта и вывести как меню на главную страницу, только оно намного будет заметнее и значит больше привлекать начнет.
Kosten
Kosten 17.08.2017 18:442
0
Но так в описание упомянул, что не только под функцию рекламы это блок подойдет, также можно поставить на какой то актуальный материал, который может находиться на форуме, а здесь его вывести на главную страницу. К примеру новости сайта, которые постоянно обновляются и этот блок задействовать под них.
avatar