Как вы решаете какую картиинку просмотреть, когда серфите какую-нибудь галлерею? Больше чем уеверн, что нажмете на ту, которая больше всего вам приглянулась. И вы примите это решение в считанные секунды. А если у картинки есть подпись, да еще и если она(подпись) понравилась, то точно откроете пригланувшуюся вам картинку И так, к чему я все это веду? А вот к чему…

Честно говоря, на создание такой маленькой галлереии меня побудил сайт Design Shack. Там как ращ то, что я и говорил: изображение и подпись. Только подпись весьма оригинально сделано, она пояляется при наведении на изображение.

Ну что ж, это непроблема реализовать.

И так, наша цель сделать изображение, при наведении на которое будет появляется описание поверх этого изображения. Описание будет появляется в прозрачном div‘е. Для начала нам требуется отрендорить наши изображения. Дедаем это следующим образом:

<ul>
<li>
<a href="i/image1_normal.jpg">
<img src="i/image1.jpg" alt="Пример картинки" />
</a>
</li>
/* и так далее */
</ul>

Теперь создаем стили для нашего списка:

ul
{
margin:0px;
padding:0px;
}
li
{
list-style-type:none;
float:left;
margin:15px;
position:relative;
padding:0px;
}
li img
{
border:0px;
}
li a
{
display:block;
}

Таким образом, мы создали наипростейшую галлерею. Добавим к картинкам div с описанием:

<ul>
<li> <a href="i/image1_normal.jpg">
<img src="i/image1.jpg" alt="Пример картинки" />
<div class="hint">
<div>MotivNo
Добавлена 02.09.2008</div>
</div>
</a><a href="i/image1_normal.jpg"> </a></li>
/* и так далее */</ul>

Как видите, у нас появился div с классом hint. Это собственно иесть подпись. Теперь применияем к нему стили:

.hint
{
/* позиционирование и размеры */
position:absolute;
width:100%; height:50px;
top:70px; left:0px;
/* отступы */
margin:0px; padding:0px;
/* шрифт */
font-family:Arial; font-size:10px;
color:#ffffff;
text-decoration:none;
/* фон */
background-color:Black;
opacity: .5;
filter: alpha(opacity=50);
/* остальное */
display:none;
cursor:pointer;
}
. hint div
{
padding: 10px;
}

Тут есть некоторые нюансы:
1-ое.Мы применяем к нашему блоку position:absolute с тем, а к списку с изображениями position:relative – это нам нужно для того, что подпись повлялась именно внизу ищображения, не где-то там еще.
2-ое. Фону мы делаем прозрачность – эо чисто из космнтических целей. Мне кажется, что так красивее будет
3-е. Естественно прячем этот блок путем display:none.

Осталось только написать пару строчек на JavaScript. Собственно вот они:

$().ready(function(){
$("a").mouseover(function(){
$(this).find(".hint").show(); /* при наведении показываем наш блок */
}).mouseout(function(){
$(this).find(".hint").hide(); /* прячем блок */
});
});

Пример можно посмотреть тут.

P.S единстевенным минусом, который я вижу на данный момент в таком решении то, что ресайзы должны быть все одинаковыми, иначе сотрится не аккуртано. В примере это хорошо видно. Если у кого-то будет решение данной проблемы – оставляйте комментарии