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

Данный урок был подготовлен американским блоггером 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;}

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sohtanaka.com
Перевел: Максим Шкурупий
Урок создан: 7 Апреля 2009
Просмотров: 39450
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^