Гостевой вход

Вы не залогинились
23:26

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

Категория: Tooltips

Метки: фотогалерея, всплывающие подсказки
Сама фотогалерея представлена в виде списка с классом '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;}

Просмотров: 149 | Скачиваний: 0 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

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

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

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

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

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

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

    Toolbar.js - jQuery плагин для создания панелей инструментов во всплывающих подсказках

    А вот это, конечно, просто вау, ребята! Стильные, компактные панели инструментов, внутри всплывающих подсказок! Мечта веб-мастера! Не занимают много места, гибкие в настройке, используются шрифтовые иконки от Font Awesome, добавляются для любого элемента на странице сайта. Настройки дают возможность использования различной анимации, положений и событий. Ну и, само собой, есть возможность настройки оформления самих всплывающих подсказок в плане оформления.

    Tooltipster - гибкий и расширяемый jQuery плагин для создания современных всплывающих подсказок

    Достаточно прост для всех и достаточно мощный для всего! Ни много, ни мало, именно такой слоган у авторов этого jQuery плагина стоит на главной! И, скажу я вам, если они и лукавят, то лишь самую малость - возможности этого плагина для создания всплывающих подсказок и вправду впечатляют!

    Всплывающая подсказка на jQuery

    Вариант всплывающей подсказки с закруглением углов и тенью для блока подсказки. Используется предустановленные настройки CSS и библиотека jQuery с официального ресурса. В демо-примере показаны варианты всплывающей подсказки для ссылок и для поля ввода input.

    Адаптивная галерея изображений на jQuery

    Адаптивная галерея для изображений, в которой имеются уменьшенные варианты фото для предпросмотра, при клике на которые открывается изображение большего формата в главном окне галереи. Навигация для перемещения между изображениями как таковая отсутствует, вы просто выбираете нужную превьюшку, кликая по ней.

Онлайн статистика

18.11.2017

Суббота

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: