Hello developers, today in this blog, you will learn to create Blog Cards with Hover Animation using HTML & CSS.
The Blog Post Card is used to showcase the image with its title and some description about the post and a read more button to read the complete details of the post.
In this program (Blog Cards with Hover Animation), on the webpage, there are three cards with their images and title. When you hover over the card, the card will expand and will show an image with the title and some description with a read more button. You can add as many cards as you need. It can be used on your webpage. It can be used to give details about the product, employee's working in the company, etc.,
The source code of this Blog Cards with Hover Animation is given below if you want the source code of this program, you can copy it. You can use this Blog Cards with Hover Animation code on your projects. CSS translate property has been used to make the card expand.
Blog Cards with Hover Animation [Source Code]
To make this website, you would like to make two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to make a file with a .html extension.
body{
margin: 0;
padding: 0;
min-height: 100vh;
background: #E44D26;
background: -webkit-linear-gradient(to right, #F16529, #E44D26);
background: linear-gradient(to right, #F16529, #E44D26);
display: flex;
justify-content: center;
align-items: center;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.container{
width: 1200px;
position: relative;
display: flex;
justify-content: space-between;
}
.container .card{
position: relative;
cursor: pointer;
}
.container .card .face{
width: 350px;
height: 250px;
transition: 0.5s;
border-radius: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container .card .face.face1{
position: relative;
background: #000;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
}
.container .card:hover .face.face1{
transform: translateY(0);
border-radius: 12px 12px 0 0;
}
.container .card .face.face1 .content{
opacity: 1;
transition: 0.5s;
}
.container .card:hover .face.face1 .content{
opacity: 1;
}
.container .card .face.face1 .content img{
max-width: 150px;
}
.container .card .face.face1 .content h3{
margin: 10px 0 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 1.5em;
}
.container .card .face.face2{
position: relative;
background: #000;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
transform: translateY(-150px);
}
.container .card:hover .face.face2{
transform: translateY(0);
border-radius: 0 0 12px 12px;
}
.container .card .face.face2 .content p{
color: #F16529;
margin: 0;
padding: 0;
}
.container .card .face.face2 .content a{
margin: 15px 0 0;
display: inline-block;
text-decoration: none;
font-weight: 900;
color: #E44D26;
padding: 5px;
border: 1px solid #F16529;
border-radius:5px;
}
.container .card .face.face2 .content a:hover{
background: #E44D26;
color: #fff;
}
.credit a{
text-decoration: none;
color: #fff;
font-weight: 900;
}
.credit {
margin-top: 20px;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating these Blog Cards with Hover Animation using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team