Вывод заголовков изображений при наведении мышки

Демо версия находится здесь. Все файлы скачать можно тут.

HTML

Это комбинация заголовка изображения и техники "тизера". Я сделал так, чтобы заголовок рисунка был доступен при наведении на ссылку. Чтобы это выглядело привлекательнее, я решил добавить кнопку "Подробнее", которая подскажет пользователям, что здесь можно получить больше информации о рисунке.

<div class="imgteaser">
<a href="#">
<img src="Daim1.jpg" alt="Daim Graffiti" />
<span class="more">&raquo; Подробнее</span>
<span class="desc">
<strong>DAIM 2002</strong>
Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
</span>
</a>
</div>

CSS

Для начала я создам основной слой вместе со свойствами hover:

.imgteaser {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.imgteaser a {
text-decoration: none;
float: left;
}
.imgteaser a:hover {
cursor: pointer;
}

Теперь добавим эффект двойной границы для рисунка:

.imgteaser a img {
float: left;
margin: 0;
border: none;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}

Теперь давайте оформим кнопку "Подробнее" и вывод заголовка:

.imgteaser a .more {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 1.2em;
color: #fff;
background: #000;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 11px;
left: 11px;
padding: 10px;
margin: 0;
width: 566px;
border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}

По умолчанию мы хотим, чтобы кнопка "Подробнее" была видима и при наведении мышки она исчезала, и вместо нее показывался заголовок картинки. По какой-то причине IE6 не прячет кнопку при использовании display: none;, но visibility:hidden; работает отлично.

.imgteaser a .desc { display: none; }
.imgteaser a:hover .more { visibility: hidden;}

Все готово. Эта техника может быть использована при создании галерей изображений, в которых Вам необходимо объяснять детали изображений. Пример подобной галереи Вы можете найти тут. Мне очень нравится, как они выводят количесвто комментариев при наведении на картинку.

Данный урок подготовлен для Вас командой сайта http://ruseller.com

Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля? Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп. Узнать подробнее

Комментарии (0)

Оставить комментарий:

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):