Подписи к изображениям на CSS

CSS3 является очень мощным инструментом. В наши дни его можно использовать там, где раньше требовались изображения и JavaScript для получения различных эффектов. Данный урок демонстрирует шесть визуальных эффектов для вывода подписей к изображениям с применением только CSS3. Подписи к изображениям с различными визуальными эффектами реализованы с помощью CSS. 6 различных вариантов которые подходят для реализации под мобильные устройства. Для просмотра подписи необходимо навести мышкой на изображение.

HTML

<h2>Подписи к изображениям на CSS</h2>
<div class="image-container image-container-num1">
 <div class="image image-num1">
 <img src="http://lorempixel.com/g/300/300/technics/" />
 </div>
 <div class="caption caption-num1">
 <span class="bottom">There's<br>always a siren</span>
 </div>
</div><br class="break">
<div class="image-container image-container-num2">
 <div class="image image-num2">
 <img src="http://lorempixel.com/g/200/300/city/" />
 </div>
 <div class="caption caption-num2">
 Singing you to shipwreck
 </div>
</div><br class="break">
<div class="image-container image-container-num3">
 <div class="image image-num3">
 <img src="http://lorempixel.com/g/300/200/nightlife/" />
 </div><br class="break">
 <div class="caption caption-num3">
 Steer away from these rocks
 </div>
</div><br class="break">
<div class="image-container image-container-num4">
 <div class="image image-num4">
 <img src="http://lorempixel.com/g/300/300/transport/" />
 </div>
 <div class="caption caption-num4">
 We'd be a walking disaster
 </div><br class="break">
</div><br class="break">
<div class="image-container image-container-num5">
 <div class="image image-num5">
 <img src="http://lorempixel.com/g/300/300/abstract/" />
 </div>
 <div class="caption caption-num5">
 Just 'cause you feel it
 </div>
</div><br class="break">
<div class="image-container image-container-num6">
 <div class="image image-num6">
 <img src="http://lorempixel.com/g/200/200/people/" />
 </div>
 <div class="caption caption-num6">
 Doesn't mean it's there.
 </div>
</div>
<!--EXPERIMENTAL-->
<!--<br class="break">
<div class="image-container image-container-num7">
 <div class="image image-num7">
 <img src="http://lorempixel.com/g/300/300/animals/" />
 </div>
 <div class="caption caption-num7">
 Someone on your shoulder<br>
 Someone on your shoulder<br>
 There there!
 </div>
</div>-->

 CSS

html, body {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: 0;
 padding: 0;
 border: 0;
 font-family: "Lato", Segoe UI, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: 100;
 color: #fff;
 text-align: center;
}
h2 {
 color: #333;
 font-size: 45px;
 margin: 32px;
}
.image-container {
 display: inline-block;
 position: relative;
 width: 200px;
 height: 200px;
 overflow: hidden;
 background: #fff;
 cursor: pointer;
}
.image {
 width: 200px;
 height: 200px;
 z-index: 1;
 -webkit-transition: all .5s;
 transition: all .5s;
}
.image img {
 max-width: 100%;
}
.caption {
 width: 200px;
 height: auto;
 padding-top: 10px;
 padding-bottom: 10px;
 background: rgba(0,0,0,.8);
 z-index: 2;
 font-weight: 300;
 -webkit-transition: all .5s;
 transition: all .5s;
}
.caption-num1 {
 position: relative;
 height: 60px;
 padding: none;
 -webkit-transform: rotate(45deg) translateY(-280px) translateX(-50%);
 -ms-transform: rotate(45deg) translateY(-280px) translateX(-50%);
 transform: rotate(45deg) translateY(-280px) translateX(-50%);
}
.bottom {
 position: absolute;
 bottom: 15px;
 left: 0px;
 right: 0;
}
.image-container-num1:hover .caption-num1 {
 -webkit-transform: rotate(45deg) translateY(-200px) translateX(-50%);
 -ms-transform: rotate(45deg) translateY(-200px) translateX(-50%);
 transform: rotate(45deg) translateY(-200px) translateX(-50%)
}
.caption-num2 {
 -webkit-transform: translateY(140px);
 -ms-transform: translateY(140px);
 transform: translateY(140px);
}
.image-container-num2:hover .image-num2 {
 opacity: .8;
 -webkit-transform: translateY(-50%) translateY(0px);
 -ms-transform: translateY(-50%) translateY(0px);
 transform: translateY(-50%) translateY(0px);
}
.image-container-num2:hover .caption-num2 {
 -webkit-transform: translateY(-37px);
 -ms-transform: translateY(-37px);
 transform: translateY(-37px);
}
.image-num3 img {
 max-width: none;
 max-height: 100%;
}
.image-num3 {
 direction: rtl;
}
.caption-num3 {
 opacity: 0;
 width: 300px;
 text-align:right;
 padding-right: 14px;
 -webkit-transform: translateY(-100%);
 -ms-transform: translateY(-100%);
 transform: translateY(-100%);
}
.image-container-num3:hover .image-num3 {
 -webkit-transform: translateX(50%);
 -ms-transform: translateX(50%);
 transform: translateX(50%);
}
.image-container-num3:hover .caption-num3 {
 opacity: 1;
 -webkit-transform: translateY(-100%) translateX(-114px);
 -ms-transform: translateY(-100%) translateX(-114px);
 transform: translateY(-100%) translateX(-114px);
}
.image-container-num4:hover .image-num4 {
 -webkit-transform: scale(1.5) rotate(-10deg);
 -ms-transform: scale(1.5) rotate(-10deg);
 transform: scale(1.5) rotate(-10deg);
}
.image-container-num4:hover .caption-num4 {
 -webkit-transform: translateY(-100%);
 -ms-transform: translateY(-100%);
 transform: translateY(-100%);
}
.image-num5 img {
 max-width: none;
 -webkit-transform: translateY(-50px) translateX(-50px);
 -ms-transform: translateY(-50px) translateX(-50px);
 transform: translateY(-50px) translateX(-50px);
}
.caption-num5 {
 -webkit-transform: translateY(-100%);
 -ms-transform: translateY(-100%);
 transform: translateY(-100%);
 opacity: 0;
}
.image-container-num5:hover .image-num5 {
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
.image-container-num5:hover .caption-num5 {
 opacity: 1;
}
.caption-num6 {
 -webkit-transform: translateY(-200px) translateY(-100%);
 -ms-transform: translateY(-200px) translateY(-100%);
 transform: translateY(-200px) translateY(-100%);
}
.image-container-num6:hover .caption-num6 {
 -webkit-transform: translateY(-200px);
 -ms-transform: translateY(-200px);
 transform: translateY(-200px);
}
.image-container-num6:hover .image-num6 {
 opacity: .5;
}
.caption-num7 {
 height: 200px;
 background: none;
 color: #333;
 font-size: 20px;
 opacity: 0;
}
.image-container-num7:hover .caption-num7 {
 opacity: 1;
 -webkit-transform: translateY(-75%);
 -ms-transform: translateY(-75%);
 transform: translateY(-75%);
}
.image-container-num7:hover .image-num7 {
 -webkit-transform: scale(1.5);
 -ms-transform: scale(1.5);
 transform: scale(1.5);
 opacity: .15;
}
.break {
 display: none;
}
@media all and (max-width: 650px) {
 .image-container {
 margin: 30px;
 outline: solid 20px #eee;
 }
 .break {
 display: initial;
 }
}

Пример:

See the Pen Creative Caption Gallery (Responsive) by Joshua Mitchell (@Joshuasm32) on CodePen.

Источник

Данные эффекты основаны на трансформациях и переходах. Полноценное функционирование обеспечивается в следующих браузерах:

Internet Explorer 10+

Firefox 6+

Chrome 13+

Safari 3.2+

Opera 11+

 

HTML

 

<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>

 

css

 

/* http://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);
}

 

Пример:  

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

Источник