<div id="mainwrapper">
	<!-- Подпись  1 -->
	<div id="box-1" class="box">
		<img id="image-1" src="http://ruseller.com/lessons/les1564/demo/images/1.jpg"/>
			<span class="caption simple-caption">
				<p>Простая подпись</p>
			</span>
	</div>
	<!-- Подпись 2 -->
	<div id="box-2" class="box">
		<img id="image-2" src="http://ruseller.com/lessons/les1564/demo/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="http://ruseller.com/lessons/les1564/demo/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="http://ruseller.com/lessons/les1564/demo/images/4.jpg"/>
	<span class="http://ruseller.com/lessons/les1564/demo/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="http://ruseller.com/lessons/les1564/demo/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="http://ruseller.com/lessons/les1564/demo/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>

/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* Сброс HTML5 для старых браузеров */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
h1 {
	font-size:138.5%;  
}
h2 {
	font-size:123.1%; 
}
h3 {
	font-size:108%;  
}
h1,h2,h3 {
	margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
	font-weight:bold; 
}
caption {
	margin-bottom:.5em;
	text-align:center;
}
p,fieldset,table {
	margin-bottom:1em;
}

/* Стили */
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;
}


/** Подпись 1: Простая **/
#mainwrapper .box .simple-caption {
	height: 30px;
	width: 200px;
	display: block;
	bottom: -30px;
	line-height: 25pt;
	text-align: center;
}

/** Подпись 2: На всю ширину и высоту **/
#mainwrapper .box .full-caption {
	width: 170px;
	height: 170px;	
	top: -200px;
	text-align: left;
	padding: 15px;
}

/** Подпись 3: Проявление **/
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption  {
	opacity: 0;
	width: 170px;
	height: 170px;
	text-align: left;
	padding: 15px;
}

/** Подпись 4: Выскальзывание **/
#mainwrapper .box .slide-caption {
	width: 170px;
	height: 170px;	
	text-align: left;
	padding: 15px;
	left: 200px;
}

/** Подпись 5: Поворот **/
#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;
}

/** Подпись 6: Масштаб **/
#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;
}

/** Простая подпись. Событие :hover **/
#mainwrapper .box:hover .simple-caption {
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	opacity: 1;
	transform: translateY(-100%);
}

/** Подпись на всю картинку. Событие :hover **/
#mainwrapper .box:hover .full-caption {
	-moz-transform: translateY(100%);
	-o-transform: translateY(100%);
	-webkit-transform: translateY(100%);
	opacity: 1;
	transform: translateY(100%);
}

/** Проявляющаяся подпись. Событие :hover **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption  {
	opacity: 1;
}

/** Выскальзывающая подпись. Событие :hover **/
#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%);
	opacity: 1;
}

/** Подпись с поворотом. Событие :hover **/
#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);
}

/** Масштабная подпись. Событие :hover **/
#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);
}