image_with_textFlip.css

@charset "utf-8";
/* CSS Document */
.main{
	width:50%;
	height:460px;
 	margin:60px auto;
	position:relative;
	perspective:2500px;
	overflow:hidden;
	
}
.image{
	width:100%;
	height:100%;
	
	position:absolute;
	transition:all ease-in-out 0.8s;

}
.image img{
	width:inherit;
	height:inherit;
	}
.info{

	width:50%;
	height:50%;
	position:absolute;
	transition:all ease-in-out 0.8s;
	margin-top:110px;
	margin-left:150px;
	transform:rotateY(-180deg);
	backface-visibility:hidden;
    overflow:hidden;
	transform-style:preserve-3d;
	
}
.info p{
	border:#000 double 8px;
	font-size:15px;
	text-align:center;
	margin:10px 50px 0px 50px;
}
.main:hover{
	border-radius:55em 0px / 15% 0px;
	transition:all ease-in-out 0.8s;
}

.main:not(:hover){
	border-radius:none;
	transition:all ease-in-out 0.8s;
}
.main:hover img{
    transform:scale(2);
	transition:all ease-in-out 0.8s;
	filter:blur(5px);
	border-radius:55em 0px / 15% 0px;
}
.main:not(:hover) img{
	transition:all ease-in-out 0.8s;
	filter:blur(0px);
	border-radius:0px;
}
.main:hover .info{
	transition:all ease-in-out 0.8s;
	transform:rotateY(0deg);
}
.main:not(:hover) .info{
	transition:all ease-in-out 0.8s;
}