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

Подписи к изображениям с различными визуальными эффектами реализованы с помощью 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;
 }
}