Flip card.
<!DOCTYPE html>
<html>
<head>
<title>Flip Card Effect Using HTML5 and CSS</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style type="text/css">
body{
font-family: sans-serif;
}
img{width: 400px;
height: 400px;
}
/* Setting flip card container*/
.flip-card{
background-color: transparent;
width: 400px;
height: 400px;
perspective: 1000px; /* you can remove this property if you don't want to 3D effect*/
/* this property adjust the position a 3D element in relation to hte user order to provide a 3D perpective*/
}
/* This container helps you to create position front side and back side of the content*/
.flip-card-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.9s;
transform-style: preserve-3d;
box-shadow: 0 3px 5px 0 rgba(0,0,0,0.3);
}
/* This properties helps you to create horizontal flip effect on mouse hover an object */
.flip-card:hover .flip-card-inner{
transform: rotateY(180deg);
}
/* This properties helps you to create position of back side and front side content*/
.flip-card-front-side, .flip-card-back-side{
position: absolute;
width: 100%;
height: 100%;
backface-visibility:hidden;
}
/* This properties helps you to create background effect if image in not present*/
.flip-card-front-side{
background-color: #140303;
color: yellow;
}
/* This properties helps you to create container of back side content*/
.flip-card-back-side{
padding-top:50px;
background-color: #0071b5;
color: white;
transform:rotateY(180deg);
}
/* This properties helps you to create style of social media icons*/
.fa{
font-size: 40px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Flip Card Effect using css</h1>
<h3>Hover mouse on the image</h3>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front-side">
<img src="avatar-rectangle.png" alt="avatar" >
</div>
<div class="flip-card-back-side">
<h1>Rahul Gupta</h1>
<p>Computer-----</p>
<p>Cell No. 9800000000 </p>
<p>eMail:rahulgupta@gmail.com</p>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-youtube-square"></i>
</div>
</div>
</div>
</div>
</body>
</html>
