body{
	margin:0;
	padding:0;
	font-family:sans-serif;
	background:#333;
}

.card{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:350px;
	height:250px;
	background:#262626;
}


.card .imgbox{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transform-origin:bottom;
	transition:0.5s;
	transform:translateY(0) rotate(0deg);
}  

.card:hover .imgbox{
	transform:translateY(-100%) rotateX(90deg);
}
	
	
.card .details{

	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background:#262626;
	transform-origin:top;
	transition:0.5s;
	box-sizing:border-box;
	padding:20px;
	text-align:center; 
	transform:translateY(100%) rotateX(-90deg);
}


.card:hover .details{
transform:translateY(0%) rotateX(0deg);
}	
	
	
	
.card .details .content{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	transform:translateY(-50%);
}

.card .details .content h3{
	color:#fff;
	text-transform:uppercase;
}


.card .details .content h3 span{
	font-size:14px;
	color:#ff0;
}



.card .details .content ul{
	margin:0;
	padding:0;
	display:flex;
	width:100%;
	padding:20px 40px;
	box-sizing:border-box;
}



.card .details .content ul li{
	list-style:none;
	width:20%;
}

.card .details .content ul li a{
	width:30px;
	height:30px;
	color:#262626;
	background:#fff;
	display:block;
	text-align:center;
	line-height:36px;
	transition:.5s;
}


.card .details .content ul li a:hover{
	color:#fff;
	background:#00bcd4;
}