Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
XemorDio (2722)
Skyline (2698)
Strelok41 (2176)
Deus-X [19.08.2017]
BaranEbaniy [18.08.2017]
hifikvn [18.08.2017]
piviks [17.08.2017]
Snaiper2003 [17.08.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Всплывающий блок при наведении на картинку на css
Всплывающий блок при наведении на картинку на css
XemorDio Дата: Суббота, 10.09.2016, 17:12 | Сообщение # 1
「 Рипер, техник сайта 」
Группа: Администраторы
Сообщений: 2722
Награды: 11 Репутация: 294
Статус: Offline

На днях мне в лс на другом сайте постучался пользователь с просьбой сделать всплывающий блок с описанием материала при наведении на картинку. Ну вообщем я сделал (вознаграждения конечно же никакого не получил, ну и ладно ничего страшного XD), но я подумал, что данный блок появляющийся при наведении на картинку многим будет нужен, так как в интернете много решений где появляется какой-либо блок при наведении, но почти все эти решения на js, и очень мало на css, ну и конечно вообще нету с полным объяснением, что и как делается... Да да, вы правильно поняли, что в данном материале будет не просто выложен код, а по полочкам будет все расписано, что и как сделано, что бы даже новичок понял что в коде нужно изменить, что бы подстроить под свой сайт...

В данном примере я не прописывал код для чего-то конкретного, а просто сделал блок и вставил в него текст... Ну а вы будете сами его использовать для информера например или для описания материала, вообщем на что фантазии хватит на то и используете...

И так начнем:

1) HTML-код:
Код
<div class="a1">
  <img style="width:180px; height:250px;" src="http://j-p-g.net/if/2015/12/13/0071484001450040538.jpg" alt="">  
  <div class="b1">
  <div>Убрать из друзей
  <br>
  <span class="b2">Категория</span>
  </div>

  <span class="b3">
  Главный герой совершает удачную сделку и становится владельцем собственного дома. Однако, как оказалось, цена была низкой из-за странностей, которые присущи его новому обиталищу. Дом обладает способностью перемещать своего хозяина в те места, где кто-то вспоминает о нем, при этом не особо сверяясь с желаниями своего владе...
  </span>  

  <div>
  <b style="font-size:14px;">144</b> <b style="color:rgba(100, 100, 100, 0.5); font-size:12px;">Просмотра |</b>
  <b style="font-size:14px;">4</b> <b style="color:rgba(100, 100, 100, 0.5); font-size:12px;">Комментария |</b>
  <b style="font-size:14px;">100</b> <b style="color:rgba(100, 100, 100, 0.5); font-size:12px;">Ещё что-то</b>
  </div>  
  </div>  
</div>

2) CSS-код:
Код
<style>  
.a1 {
position:relative; /* относительное позиционирование */
}

.b1 {
background:#fff; /* цвет фона блока */
border:1px solid #ddd; /* обводка блока серым цветом*/  
border-radius:3px; /* скругление улов */
position:absolute; /* абсолютное позиционирование */
top:0px; /* Тут регулируется вывод подсказки */  
left:190px; /* И Тут регулируется вывод подсказки */  
width:370px; /* ширина */
height:245px; /* высота */
z-index:2; /* слой наложения */
display:none; /* блок скрыт */
}  

.b2 {
margin-top:5px; /* отступ сверху */
padding:0px; /* отступ внутри */
font-size:10px; /* размер шрифта */
}

.b3 {
display:block; /* блок виден */
padding:10px; /* отступ внутри */
}  

.b1 div:first-child {
background: #F9F9F9; /* цвет верхней полоски */
border-bottom:1px solid #ddd; /* полоса снизу */
padding:10px; /* отступ внутри */
}  

.b1 div:last-child {
position:absolute; /* абсолютное позиционирование */
bottom:0px; /* отступ снизу */
width:350px; /* ширина */
background:#F9F9F9; /* цвет нижней полоски */
border-top:1px solid #ddd; /* полоса вверху */
padding:10px; /* отступ внутри */
}  

.a1:hover .b1 {
display:block; /* блок виден при наведении на картинку */
}
.a1:hover .b1:hover {
display:none; /* блок скрывается когда мышка уходит за пределы картинки*/
} /* источник */
</style>

Все.
Форум » Web-раздел » Скрипты uCoz » Всплывающий блок при наведении на картинку на css
Страница 1 из 11
Поиск:
00:33
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017