Главная » Каталог » Tooltips » Дополнительная информация во всплывающих подсказках на CSS

Tooltips

Дополнительная информация во всплывающих подсказках на CSS



Сама фотогалерея представлена в виде списка с классом 'columns':

Код

<ul class="columns">
  <li>
  <a href="#"><img src="virgin.jpg" alt="" /></a>
  <div class="info">
  <h2>Заголовок подсказки</h2>
  <p>Текст подсказки</p>
  </div>
  </li>
</ul>


Давайте посмотрим структуру элементов списка. Ну, во-первых, само изображение-ссылка, здесь всё ясно (кстати, на демо странице изображения имеют размеры 220х200 пикселов)
Подсказка к изображению заключена в блок с классом 'info', в котором в теге h2, разумеется, содержится заголовок подсказки, а далее, в блочном элементе параграфа идет текст подсказки.

Устанавливаем нулевой бордер для изображений галереи

Код

img {border: none;}


Вот CSS-стили для оформления фотогалереи и состояний изображений до и после наведения на них курсора мыши:

Код

ul.columns {
  width: 960px;
  list-style: none;
  margin: 0 auto; padding: 0;
}
ul.columns li {
  width: 220px;
  float: left; display: inline;
  margin: 10px; padding: 0;
  position: relative;
}
ul.columns li:hover {z-index: 99;}

ul.columns li img {
  position: relative;
  filter: alpha(opacity=30);
  opacity: 0.3;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
ul.columns li:hover img{
  z-index: 999;
  filter: alpha(opacity=100);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

ul.columns li .info {
  position: absolute;
  left: -10px; top: -10px;
  padding: 210px 10px 20px;
  width: 220px;
  display: none;
  background: #fff;
  font-size: 1.2em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
  font-size: 1.2em;
  font-weight: normal;
  text-transform: uppercase;
  margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}
Обсуждение материала:
Комментариев: 0
avatar

Другие материалы:

    Оригинальный Lightbox от Lokesh Dhakar

    19.01.2017

    Классический лайтбокс от Lokesh Dhakar, рассмотрим два варианта: лайтбокс для одиночных изображений и лайтбокс для группы изображений с элементами навигации.

    Комментарии: 0   Просмотры: 199

    Lightcase.js - респонсивный Lightbox на основе jQuery и SASS

    13.12.2016

    Lightcase.js представляет собой мощный и гибкий плагин Lightbox для настольных компьютеров и мобильных устройств. Он использует CSS3 переходы, работает со сторонними ресурсами, поддерживает различные типы устройств, а также все современные браузеры, такие как Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9+ и многие другие.

    Комментарии: 0   Просмотры: 340

    PowerTip - jQuery плагин для создания всплывающих подсказок

    06.11.2016

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

    Комментарии: 0   Просмотры: 258

Хостинг от uCoz