Всплывающий блок при наведении на картинку на css by webo4ka.ru

992
9.2 из 10
Проголосовало: 9






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

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

И так начнем:

1) HTML-код:

Код

<div class="a1">
  <img style="width:180px; height:250px;" src="http://s43.radikal.ru/i101/1512/2a/af9b8749118f.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; /* блок скрывается когда мышка уходит за пределы картинки*/
} /* источник webo4ka.ru */
</style>


p.s. Если в коде все равно-что-то не понятно, пишите в комментариях, все поясню...
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 5

astdunaev
0
astdunaev написал: Написано 03 Февраля 2016 в 01:19
Комментарий №5
ок попробую у себя, спасибо))

xrystik
0
xrystik написал: Написано 14 Декабря 2015 в 16:55
Комментарий №1
сПАСИБО!!! ЗАБРАЛИ СЕБЕ!

Вовчик
0
Вовчик написал: Написано 14 Декабря 2015 в 20:19
Комментарий №2
пожалуйста, есть идеи типо таких, пиши, буду так же пояснять весь css код...

astdunaev
0
astdunaev написал: Написано 03 Февраля 2016 в 01:15
Комментарий №3
а есть ли скрипт, при навидении на ссылку чтоб такое же описание выпадало???????? happy

Вовчик
0
Вовчик написал: Написано 03 Февраля 2016 в 01:16
Комментарий №4
вместо картинки ссылку ставь)

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: