.caption {
	display: inline-block;
	position: relative;
	margin: 10px;
}
.caption img {
	display: block;
	max-width: 100%;
}
/* Slide in on hover (animate transforms) */
.caption-1 {
	overflow: hidden;
	background: none;
	width:100%;
	height:100%;
}
.caption-1 img {
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.caption-1:hover img {
	opacity: 0.5;
}
 .caption-1::after, .caption-1::before {
 position: absolute;
 width: 100%;
 height: 50%;
 color: #fff;
 z-index: 1;
 -webkit-transition: -webkit-transform 0.3s ease-in-out;
 -moz-transition: -moz-transform 0.3s ease-in-out;
 transition: transform 0.3s ease-in-out;
}
 .caption-1::after {
 content: attr(data-title);
 top: 0;
 left: 0px;
 width:100%;
 height:auto;
 background: #2390b0;
 font-size: 22px;
 font-weight: 300;
 padding: 20px 20px 20px 5px;
 -webkit-transform: translateY(-100%);
 -moz-transform: translateY(-100%);
 transform: translateY(-100%);
}
 .caption-1::before {
 content: '...' attr(data-description) '...';
 top: 35%;
 left: 0px;
 width:100%;
 height:100%;
 background: #83c1d3;
 font-size: 14px;
 padding: 15px 0;
 -webkit-transform: translateY(100%);
 -moz-transform: translateY(100%);
 transform: translateY(100%);
}
 .caption-1:hover::after, .caption-1:hover::before {
 -webkit-transform: translateY(0%);
 -moz-transform: translateY(0%);
 transform: translateY(0%);
}
/* Box 2 */
.caption-2 {
	overflow: hidden;
	background: none;
	width:100%;
	height:100%;
}
.caption-2 img {
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.caption-2:hover img {
	opacity: 0.5;
}
 .caption-2::after, .caption-2::before {
 position: absolute;
 width: 100%;
 height: 50%;
 color: #fff;
 z-index: 1;
 -webkit-transition: -webkit-transform 0.3s ease-in-out;
 -moz-transition: -moz-transform 0.3s ease-in-out;
 transition: transform 0.3s ease-in-out;
}
 .caption-2::after {
 content: attr(data-title);
 top: 0;
 left: 0px;
 width:100%;
 height:auto;
 background: #16a085;
 font-size: 22px;
 font-weight: 300;
 padding: 20px 20px 20px 5px;
 -webkit-transform: translateY(-100%);
 -moz-transform: translateY(-100%);
 transform: translateY(-100%);
}
 .caption-2::before {
 content: '...' attr(data-description) '...';
 top: 35%;
 left: 0px;
 width:100%;
 height:100%;
 background: #71b6a9;
 font-size: 14px;
 padding: 15px 0;
 -webkit-transform: translateY(100%);
 -moz-transform: translateY(100%);
 transform: translateY(100%);
}
 .caption-2:hover::after, .caption-2:hover::before {
 -webkit-transform: translateY(0%);
 -moz-transform: translateY(0%);
 transform: translateY(0%);
}
/* Box 3 */
.caption-3 {
	overflow: hidden;
	background: none;
	width:100%;
	height:100%;
}
.caption-3 img {
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.caption-3:hover img {
	opacity: 0.5;
}
 .caption-3::after, .caption-3::before {
 position: absolute;
 width: 100%;
 height: 50%;
 color: #fff;
 z-index: 1;
 -webkit-transition: -webkit-transform 0.3s ease-in-out;
 -moz-transition: -moz-transform 0.3s ease-in-out;
 transition: transform 0.3s ease-in-out;
}
 .caption-3::after {
 content: attr(data-title);
 top: 0;
 left: 0px;
 width:100%;
 height:auto;
 background: #f39c12;
 font-size: 22px;
 font-weight: 300;
 padding: 20px 20px 20px 5px;
 -webkit-transform: translateY(-100%);
 -moz-transform: translateY(-100%);
 transform: translateY(-100%);
}
 .caption-3::before {
 content: '...' attr(data-description) '...';
 top: 35%;
 left: 0px;
 width:100%;
 height:100%;
 background: #f9c674;
 font-size: 14px;
 padding: 15px 0;
 -webkit-transform: translateY(100%);
 -moz-transform: translateY(100%);
 transform: translateY(100%);
}
 .caption-3:hover::after, .caption-3:hover::before {
 -webkit-transform: translateY(0%);
 -moz-transform: translateY(0%);
 transform: translateY(0%);
}