Cards 16

Home » Components » Cards » Cards 16

Cards 16

The Valley

- Landscape

The Battle

- Spiritual

The Louvre

- City


The Valley

- Landscape

The Battle

- Spiritual

The Louvre

- City

/* ===== Cards 16 ===== */

#cards-16 .overlay {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s
}

#cards-16 .card:hover .overlay {
	top: 20px;
	left: 20px;
	background: rgba(19, 69, 230, 0.9);
}

#cards-16 .card-body {
	position: absolute;
	opacity: 0;
	bottom: 0px;
	left: 20px;
	display: none!important;
	-webkit-animation-name: reveal;
	        animation-name: reveal;
	-webkit-animation-duration: .7s;
	        animation-duration: .7s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

#cards-16 .card:hover .card-body {
	display: block!important;
}

@-webkit-keyframes reveal {
	from {
		opacity: 0;
		-webkit-transform: translatex(0);
		        transform: translatex(0);
	}
	to {
		opacity: 1;
		-webkit-transform: translatex(20px);
		        transform: translatex(20px);
	}
}

@keyframes reveal {
	from {
		opacity: 0;
		-webkit-transform: translatex(0);
		        transform: translatex(0);
	}
	to {
		opacity: 1;
		-webkit-transform: translatex(20px);
		        transform: translatex(20px);
	}
}