<section>
	<div class="row">
		<div class="col-md-4 col-sm-6 col-xs-12">
			<div class="card">
				<div class="cover item-a">
					<h1>Little<br>Bonsai</h1>
					<span class="price">$79</span>
					<div class="card-back">
						<a href="#">Add to cart</a>
						<a href="#">View detail</a>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12">
			<div class="card">
				<div class="cover item-b">
					<h1>Tropical<br>Leaf</h1>
					<span class="price">$35</span>
					<div class="card-back">
						<a href="#">Add to cart</a>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4 col-sm-6 col-xs-12">
			<div class="card">
				<div class="cover item-c">
					<h1>Marijuana<br>Chill</h1>
					<span class="price">$155</span>
					<div class="card-back">
						<a href="#">Add to cart</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap');

$transition-time: 2.3s;

body{
	font-family: 'Oswald', sans-serif;
	background-color: #212121;
	section{
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
		.row{
			align-items: center;
    	height: 100vh;
		}
	}
}
.card{
	position: relative;
	height: 400px;
	width: 100%;
	margin: 10px 0;
	transition: ease all $transition-time;
	perspective: 1200px;
	&:hover{
		.cover{
			transform: rotateX(0deg) rotateY(-180deg);
			&:before{
				transform: translateZ(30px);
			}
			&:after{
				background-color: black;
			}
			h1{
				transform: translateZ(100px);
			}
			.price{
				transform: translateZ(60px);
			}
			a{
				transform: translateZ(-60px) rotatey(-180deg);
			}
		}
	}
	
	.cover{
		position: absolute;
		height: 100%;
		width: 100%;
		transform-style: preserve-3d;
  	transition: ease all $transition-time;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		&:before{
			content: '';
			position: absolute;
			border: 5px solid rgba(255,255,255,.5);
			box-shadow: 0 0 12px rgba(0,0,0,.3); 
			top:20px;
			left:20px;
			right:20px;
			bottom:20px;
			z-index: 2;
			transition: ease all $transition-time;
			transform-style: preserve-3d;
			transform: translateZ(0px);
		}
		&:after{
			content: '';
			position: absolute;
			top:0px;
			left:0px;
			right:0px;
			bottom:0px;
			z-index: 2;
			transition: ease all 1.3s;
			background: rgba(0,0,0,.4);
		}
		&.item-a{
			background-image: url('https://images.unsplash.com/photo-1520412099551-62b6bafeb5bb?auto=format&fit=crop&w=600&q=80');
		}
		&.item-b{
			background-image: url('https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=600&q=80');
		}
		&.item-c{
			background-image: url('https://images.unsplash.com/photo-1525945518069-b924046d1385?auto=format&fit=crop&w=600&q=80');
		}
		h1{
			font-weight: 600;
			position: absolute;
			bottom: 55px;
			left: 50px;
			color: white;
			transform-style: preserve-3d;
  		transition: ease all $transition-time;
			z-index:3;
			font-size: 3em;
			transform: translateZ(0px);
		}
		.price{
			font-weight: 200;
			position: absolute;
			top: 55px;
			right: 50px;
			color: white;
			transform-style: preserve-3d;
  		transition: ease all $transition-time;
			z-index:4;
			font-size: 2em;
			transform: translateZ(0px);
		}
	}
	.card-back{
		position: absolute;
		height: 100%;
		width: 100%;
		background: #0b0f08;
		transform-style: preserve-3d;
  	transition: ease all $transition-time;
		transform: translateZ(-1px);
		display: flex;
		align-items: center;
		justify-content: center;
		a{
			transform-style: preserve-3d;
			transition: ease transform $transition-time, ease background .5s;
			transform: translateZ(-1px) rotatey(-180deg);
			background: transparent;
			border: 1px solid white;
			font-weight: 200;
			font-size: 1.3em;
			color: white;
			padding: 14px 32px;
			outline: none;
			text-decoration: none;
			&:hover{
				background-color: white;
				color: #0b0f08;
			}
		}
	}
}
View Compiled
/*nope*/

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.