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

Данный урок был подготовлен американским блоггером www.SohTanaka.com. Оригинал находится здесь.

По просьбе автора исходники были удалены с наших серверов. Демо версия доступна для просмотра на сайте автора.

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;}

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