Awesome Card With HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a card using HTML & CSS with an awesome hover effect.

A card is used to show the detail about some products and other kinds of stuff. You can create cards to showcase the product of your business, Pricing plan, what you offer, details of your team member, and so on. This will make your website UI better and visitors/customers feel easy to read the information.

3 Tips to make Cards Look Better

Use the primary color of your website on the card
Make the hover effects attractive
Add transition and animation

Today I will show you how you can make a basic card design using HTML and CSS with an awesome hover effect. In this Card, there is an image on the top and a yellow background. The image is overlapping the background and at the top, some portion of the image is outside the yellow background. This makes the card look unique and better.

When you hover over the card the title, short description, and a button will appear from the top to its exact position within 1 second. At first, the title will appear then the description and at last the button will appear. This sequence and method of showing information make the user/visitor feel good. Also, there is a hover effect on the button. At button hover, the background of the button will slightly change to dark blue within 0.2 seconds.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Create Awesome Card with HTML & CSS).

Video tutorial of card design using HTML & CSS

All this card design is based on HTML & CSS. If you’re a beginner you can also create this type of card. If you like this program (Awesome Card using HTML & CSS) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Awesome Card Using HTML & CSS [Source Codes]

To create this program (Awesome Card Using HTML & CSS). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

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>Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <img src="elon-musk.jpg" alt="">
            <h3>Elon Musk</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing 
               elit. Deserunt excepturi cum iure numquam illo, modi
               repellendus quas magnam maiores, aliquid molestias. 
               Id rem delectus porro?
            </p>
            <button>Learn More</button>
        </div>
    </div>
</body>
</html>

Second, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with a .css extension.

CSS

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #83aaff;
}
.container .card{
    width: 400px;
    height: 250px;
    display: flex;
    flex-direction: column;
    background-color: #ffd900;
    padding: 10px 15px;
    border-radius: 5px;
    transition: .5s all ease-in-out;
}
.container .card img{
    margin-top: -50px;
    border-radius: 5px;
    z-index: 1;
}
.container .card h3{
    margin-top: -100px;
    opacity: 0;
    transition: .4s all ease-in-out;
}
.container .card p{
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: #292929;
    margin-top: -100px;
    opacity: 0;
    transition: .8s all ease-in-out;

}
.container .card button{
    padding: 10px;
    width: 120px;
    border: none;
    margin-top: -150px;
    background-color: #175df3;
    color: #ffffff;
    font-size: 17px;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    transition: 1s all ease-in-out;
}
.container .card button:hover{
    background-color: #0e44b9;
    transition: .2s all ease-in-out;
}
.container .card:hover{
    height: 360px;
}
.container .card:hover h3{
    margin-top: 5px;
    opacity: 1;
}
.container .card:hover p{
    margin-top: 10px;
    opacity: 1;
}
.container .card:hover button{
    margin-top: 10px;
    opacity: 1;
}

That’s all, now you’ve successfully created an awesome card in HTML & CSS. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.

3 Tips to make Cards Look Better

You Might Also Like

Video tutorial of card design using HTML & CSS

Awesome Card Using HTML & CSS [Source Codes]

HTML

CSS

Post a Comment

Post a Comment

About Us

Contact Form