Давайте рассмотрим как осуществить интересный визуальный эффект для картинок на вашем сайте в виде всплывающей подсказки (подписи, надписи) с помощью jQuery.

Скачать исходники для статьи можно ниже

Вот так у нас будет выглядеть картинка с всплывающей подсказкой, когда курсор мыши на нее не наведен:

 
А вот так она будет выглядеть, когда курсор наведен:

 
Демонстрационные примеры можете посмотреть по следующим ссылкам:
http://webdesignandsuch.com/jquery-sliding-boxes-and-captions/
или тут:
http://mnogoblogru.hostenko.com/privet-mir/
 

1. Прежде всего подключим к сайту поддержку JQuery – для этого входим в панель управления вашим сайтом, выбираем в левом меню пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов ищем файл header.php, открываем его и находим в нем тег </hеаd> – перед ним и вставляем следующий код:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

2. Здесь же, сразу за вышеуказанным кодом, подключим сам скрипт, который и будет делать эффект всплывающей подсказки:  

<script type="text/javascript">// <![CDATA[
    $(document).ready(function(){
        $('.boxgrid.caption').hover(function(){
            $(".cover", this).stop().animate({top:'130px'},{queue:false,duration:160});
        }, function() {
            $(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});
        });
    });
// ]]></script>

3. Далее нам нужно добавить в шаблоне style.css некоторый код для данного эффекта – для этого открываем опять “Редактор” (“Внешний вид” – “Редактор”), справа среди списка шаблонов находим файл style.css, открываем его и в самый конец добавляем следующий код:

.boxgrid h3 {
    font-size:16px;
    font-family:'Droid Sans', Arial, sans-serif;
    font-weight:bold;
    color:#FFF;
    margin:10px;
}
.boxgrid {
    float:left;
    width:280px;
    height:230px;
    margin:5px;
    border:10px solid #e6e6db;
    background:#161613;
    overflow:hidden;
    position:relative;
}
.boxgrid img {
    position:absolute;
    top:0;
    left:0;
    border:0;
}
.boxgrid img:hover {
    position:absolute;
    top:0;
    left:0;
    border:0;
}
.boxgrid p {
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#fffccc;
    padding:0 10px;
    padding-left:25px;
}
.boxcaption {
    position:absolute;
    float:left;
    width:100%;
    height:100px;
    border-top:2px solid #fff;
    background:#0c4a17 url(arrow.png) -1px 40px no-repeat;
    opacity: .8;
}
.caption .boxcaption {
    top:190px;
    left:0;
}
.moreLink {
    display:block;
    position:absolute;
    width:68px;
    height:29px;
    background:url('https://mnogoblogru.hostenko.com/wp-content/uploads/more.png');
    text-indent:-9999px;
    top:65px;
    right:10px;
    outline:none;
}

4. Теперь выбираем нужную нам картинку и вставляем ее, например, в запись (пост) вашего сайта со следующим кодом.
Незабываем, что код в записи нужно вставлять в закладке HTML (не “Визуальный редактор”).

</pre>
<div class="boxgrid caption"><img src="http://mnogoblogru.hostenko.com/wp-content/uploads/3.jpg" alt="" />
<div class="cover boxcaption">
<h3>Название статьи</h3>
Краткое описание статьи
<a class="moreLink" href="http://mnogoblogru.hostenko.com/">More</a></div>
</div>
<pre>

Вот теперь все готово!
 

PS: Данный визуальный эффект можно воссоздать и с помощью CSS, но об этом напишу в одной из следующих статей.