Fade Caption

 Теперь на блоге, чтобы добавить к изображению эффект появления подписи при наведении курсора мыши, просто добавляю в тело поста div.

<div id="mainwrapper">
<div class="box" id="box-3">
<img id="image-3" src="http://1.bp.blogspot.com/-nIAIr9lXkNI/UKqB47cyV2I/AAAAAAAABrQ/bSIjkeQqB2c/s320/coffee3+%E2%80%94jquery1.JPG" />
<h3>
<span class="caption fade-caption">Проявляющаяся подпись Fade Caption
dzhordvik.blogspot.ru.&nbsp;</h3></span>

 И вот что получается:

Проявляющаяся подпись Fade Caption dzhordvik.blogspot.ru. 

html каркас.

Так выглядит конструкция HTML для применяемых стилей.

<div id="mainwrapper">

    <!-- Подпись  1 -->

    <div id="box-1" class="box">
        <img id="image-1" src="http ://image.JPG"/>
            <span class="caption simple-caption">
                <p>Простая подпись</p>
            </span>
    </div>

    <!-- Подпись 2 -->

    <div id="box-2" class="box">
        <img id="image-2" src="http ://image.JPG"/>
        <span class="caption full-caption">
            <h3>Подпись на всю картинку Full Caption</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span>
    </div>

    <!-- Подпись 3 -->

    <div id="box-3" class="box">
    <img id="image-3" src="http ://image.JPG"/>
    <span class="caption fade-caption">
        <h3>Проявляющаяся подпись Fade Caption</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>

    <!-- Подпись 4 -->

    <div id="box-4" class="box">
    <img id="image-4" src="http ://image.JPG"/>
    <span class="caption slide-caption">
     <h3>Выскальзывающая подпись Slide Caption</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>

    <!-- Подпись 5 -->

    <div id="box-5" class="box">
    <div class="rotate">
    <img id="image-5" src="http ://image.JPG"/>
    <span class="caption rotate-caption">
        <h3>Подпись с поворотом This is rotate caption</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
</div>
</div>

    <!-- Подпись 6 -->

    <div id="box-6" class="box">
    <img id="image-6" src="http ://image.jpg"/>
    <span class="caption scale-caption">
      <h3>Масштабная подпись Free Style Caption</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>
</div>

CSS3

Это просто загруженные картинки, без применения стилей.



А здесь уже к изображениям применяются стили, благодаря которым появляются подписи с разными эффектами появления.

Простая подпись

Подпись на всю картинку

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Проявляющаяся подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Выскальзывающая подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Подпись с поворотом

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Масштабная подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.