Подписи к изобаражениям с визуальными эффектами на CSS3

	<div id="mainwrapper">
		<!-- Подпись  1 -->
		<div id="box-1" class="box">
			<img id="image-1" src="/images/1.jpg"/>
				<span class="caption simple-caption">
					<p>Простая подпись</p>
				</span>
		</div>
		<!-- Подпись 2 -->
		<div id="box-2" class="box">
			<img id="image-2" src="/images/2.jpg"/>
			<span class="caption full-caption">
				<h3>Подпись на всю картинку</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="/images/3.jpg"/>
		<span class="caption fade-caption">
			<h3>Проявляющаяся подпись</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="/images/4.jpg"/>
		<span class="caption slide-caption">
			<h3>Выскальзывающая подпись</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="/images/5.jpg"/>
		<span class="caption rotate-caption">
			<h3>Подпись с поворотом</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="/images/6.jpg"/>
		<span class="caption scale-caption">
			<h3>Масштабная подпись</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>

<link href="/style.css" rel="stylesheet" type="text/css" media="screen" />

html { background-color: #eaeaea; }

#mainwrapper {
  font: 10pt normal Arial, sans-serif;
  height: auto;
  margin: 80px auto 0 auto;
  text-align: center;
  width: 660px;
}

#mainwrapper .box {
    border: 5px solid #fff;
    cursor: pointer;
    height: 182px;
    float: left;
    margin: 5px;
    position: relative;
    overflow: hidden;
    width: 200px;
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
    -moz-box-shadow: 1px 1px 1px 1px #ccc;
    box-shadow: 1px 1px 1px 1px #ccc;
}

#mainwrapper .box img {
    position: absolute;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

#mainwrapper .box .caption {
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    color: #fff;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
}

#mainwrapper .box .simple-caption {
    height: 30px;
    width: 200px;
    display: block;
    bottom: -30px;
    line-height: 25pt;
    text-align: center;
}

#mainwrapper .box .full-caption {
    width: 170px;
    height: 170px;
    top: -200px;
    text-align: left;
    padding: 15px;
}

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
    opacity: 0;
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
}

** Caption 4: Slide **/
#mainwrapper .box .slide-caption {
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
    left: 200px;
}

#mainwrapper #box-5.box .rotate-caption {
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
    top: 200px;
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

#mainwrapper .box .rotate {
    width: 200px;
    height: 400px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {
    position: relative;
    left: -200px;
    width: 170px;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

#mainwrapper .box .scale-caption h3 {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    transition-delay: 300ms;
}

#mainwrapper .box .scale-caption p {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    transition-delay: 500ms;
}

#mainwrapper .box:hover .simple-caption {
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

#mainwrapper .box:hover .full-caption {
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}  

#mainwrapper .box:hover .fade-caption {
    opacity: 1;
}

#mainwrapper .box:hover .slide-caption {
  background-color: rgba(0,0,0,1) !important;
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  opacity: 1;
  transform: translateX(-100%);
}

#mainwrapper .box:hover img#image-4 {
  -moz-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

#mainwrapper .box:hover .rotate {
    background-color: rgba(0,0,0,1) !important;
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

#mainwrapper .box:hover #image-6 {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

#mainwrapper .box:hover .scale-caption h3,
#mainwrapper .box:hover .scale-caption p {
    -moz-transform: translateX(200px);
    -o-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
}