2.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background: #6b5b95;
	font-family: fantasy;
}

label {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 280px;
	height: 350px;
	perspective: 1000px;
	transform-style: preserve-3d;
	transform: translate(-50%, -50%);
	cursor: pointer;
}

.flip-card {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.flip-card .front,
.flip-card .back {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #fff;
	backface-visibility: hidden;
}

.flip-card .back {
	transform: rotateX(180deg);
	color: #000;
	background: #a0d2eb;
}

label:hover .flip-card {
	transform: rotateX(20deg);
	box-shadow: 0 20px 20px rgba(50, 50, 50, 0.4);
}

input {
	display: none;
}

:checked + .flip-card {
	transform: rotateX(180deg);
}
label:hover :checked + .flip-card {
	transform: rotateX(160deg);
	box-shadow: 0 20px 20px rgba(50, 50, 50, 0.4);
}

.front img {
	width: 280px;
	height: 350px;	
}

.back h1 {
	color: #f75990;
	margin: 15px 0 0 0;
  font-size:23px;
}

.back p {
	font-size: 16px;
	color: #000;
	padding: 0 18px;
	line-height: 30px;
	margin: 0 auto;
}