HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="animation31.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="card">
<div class="imgBox">
<div class="image"></div>
<div class="details">
<h2>HTML AND CSS</h2>
Edin is a fully responsive theme that helps you to create a strong–yet beautiful–online presence for your business. Edin's layout adjusts itself depending on the device you are using. This means your site will look good not only on laptop browsers, but also on devices with smaller screens, such as the iPad and iPhone.
</div>
</div>
</div>
</body>
</html>
CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Quicksand');
body{
margin: 0;
padding: 0;
background-color: #708c00;
font-family: 'Quicksand', sans-serif;
}
.card{
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 400px;
background: #fff;
transform-style: preserve-3d;
transform: translate(-50%,-50%) perspective(2000px);
box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 0 20px 100px rgba(0,0,0,.5);
transition: 1s;
}
.card:hover{
transform: translate(-50%,-50%) perspective(2000px) rotate(-10deg);
box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
}
.card:before{
content: "";
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 5px;
background: #475b02;
transform-origin: bottom;
transform: skewX(-45deg);
}
.card:after{
content: "";
position: absolute;
top:0;
right: -5px;
width:5px;
height: 100%;
background: #7ea301;
transform-origin: left;
transform: skewY(-45deg);
}
.image{
background: url(https://images.clipartlogo.com/files/istock/previews/1055/105568341-green-light-bulb-on-hand-drawn-business-icons-background.jpg);
width: 100%;
height: 400px;
background-size: cover;
background-position: center;
position: relative;
transform-origin: left;
transition: 1s cubic-bezier(.15,1.7,.84,.58);
z-index: 1;
}
.card:hover .image{
transform: rotateY(-135deg);
}
.card .details{
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 20px;
z-index: -1;
}
TrueCodes 
Leave a comment