* {
	margin:0;
	padding:0;
	list-style:none;
	text-decoration:none;
}
img {
	width:100%;
	height:100%;
	border:0;
}
ul {
	margin:100px auto 0;
	width:1200px;
	overflow:hidden;
}
ul li {
	width:350px;
	position:relative;
	float:left;
	margin-right:20px;
	margin-bottom:30px;
}
ul li .cl {
	width:350px;
	transition:all   ease .65s;
	opacity:0;
	visibility:hidden;
}
ul li .cl img {
	height:214px;
}
ul li a {
	width:350px;
	display:block;
	position:absolute;
	left:0;
	top:0;
	z-index:2;
	background:rgb(242,242,242);
	color:#333;
	transition:all 0.65s ease;
}
ul li a h2 {
	padding:30px 0;
	text-align:center;
}
ul li a p {
	font-size:14px;
	width:100%;
	padding:10px 20px 30px;
	box-sizing:border-box;
}
ul li:hover .cl {
	visibility:visible;
	opacity:1;
	transform:rotateY(360deg)
}
ul li:hover a {
	background:rgba(63,107,219,0.8);
	color:#fff;
	transform:translate(10px,10px);
}