Blog Cards with Hover Animation using HTML & CSS

Blog Cards with Hover Animation using HTML & CSS

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.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Hover Expanding blog card|| Learning Robo</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script> </head> <body> <div class="container"> <div class="card"> <div class="face face1"> <div class="content"> <img src="https://cdn.pixabay.com/photo/2016/03/31/20/07/clown-1295519__480.png"> <h3>Jokes</h3> </div> </div> <div class="face face2"> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p> <a href="#">Read More</a> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <img src="https://cdn.pixabay.com/photo/2016/06/16/08/42/monster-1460885__480.png"> <h3>Music</h3> </div> </div> <div class="face face2"> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p> <a href="#">Read More</a> </div> </div> </div> <div class="card"> <div class="face face1"> <div class="content"> <img src="https://cdn.pixabay.com/photo/2016/04/01/09/29/cartoon-1299393__480.png"> <h3>Dance</h3> </div> </div> <div class="face face2"> <div class="content"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p> <a href="#">Read More</a> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> </body> </html>
CSS provides style to an HTML page. To form the page attractive create a CSS file with the name style.css and, remember that you have got to make a file with a .css 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;
  }
We hope you would like these Blog Cards with Hover Animation using HTML & CSS.

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.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome