Hi dear welcome to Ascode Blog . In this post we are going to learn how make movie blogpost card and add hover effect. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movie blog card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="icon"><i class="fas fa-play-circle"></i></div>
<div class="content">
<h2>Nullam Molesite<br>Mravida Lobortis</h2>
<p>Nunc tincideunt, elit noncursus euismod,lacus augue prnare metus, rgestas imperdiet nulla nisl quis mauris. Suspendisse a pharetra urma. Morbi dui....</p>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card {
width: 900px;
height: 450px;
border-bottom: 5px solid red;
border-top: 5px solid green;
border-right:5px solid yellow;
border-left: 5px solid blue;
background-image: url(banner.jpg);
background-size: cover;
overflow: hidden;
}
.icon {
position: absolute;
top: 40%;
left: 50%;
font-size: 10rem;
animation: bounce 1s linear infinite;
}
.fas {
color: #640b49;
background: #fff;
border-radius: 50%;
}
@keyframes bounce {
10% {
transform: scale(0.3);
}
100% {
transform: scale(1.2);
}
}
.card:hover .content {
transform: translateX(0);
}
.content {
background: #640b4980;
width: 450px;
height: 450px;
top: 0;
left: 0;
bottom: 0;
transform: translateX(-100%);
transition: 0.5s;
}
h2 {
font-size: 2.3rem;
color: #fff;
font-weight: 600;
text-transform: uppercase;
padding: 30px 20px;
letter-spacing: 0.5px;
}
p {
font-size: 1.5rem;
color: #fff;
font-weight: 500;
padding: 20px;
letter-spacing: 0.3px;
}
0 Comments