Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Modern CSS Cards
Nowadays, creating cards on a website is very important to show various data on the website. For example, on the home page of TutorialsPoint’s website, you will find different courses in the card format, and when you click on the card, it redirects you to the particular page of the course.
Furthermore, if you go to any e-commerce store such as Amazon or Flipkart, they show products in the card format. The main benefit of creating a card is that we can show short information about the product with an image and full information on the product page.
In this tutorial, we will learn to create different cards using HTML and CSS only.
Example 1 (Basic CSS Cards)
In the example below, we created the ‘card’ div element containing the single image and the ‘card-content’ div element. The ‘card-content’ div element contains the text information.
In CSS, we set the fixed dimensions for the card element. Also, we have given styles such as background color, border radius, and border, etc. Also, we apply the box-shadow effect on the card when users hover over the card.
Furthermore, we fixed the dimensions for the image and set the border radius for the top corners. Also, we set the font size of the text content. In the output, users can observe the resultant card.
<html>
<head>
<style>
.card {
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-in-out;
width: 18rem;
background-color: #fff;
}
.card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);}
.card>img {
border-radius: 5px 5px 0 0;
height: 150px;
width: 100%;
object-fit: contain;
}
.card-content { padding: 20px;}
.card h3 { font-size: 1.4rem; margin-top: 0;}
.card p { font-size: 1rem; margin-bottom: 10px;
}
.card a {
padding: 10px 20px;
background-color: #222;
border-radius: 10px;
color: white;
text-align: center;
display: inline-block;
text-decoration: none;
transition: background-color 0.4s ease-in-out;
}
.card a:hover { background-color: #4b4a4a;}
</style>
</head>
<body>
<h2> Creating the <i> basic cards </i> using the CSS </h2>
<div class = "card">
<img src = "https://www.tutorialspoint.com/static/images/logo.png?v2" alt = "Logo">
<div class = "card-content">
<h3> Python </h3>
<p> Python course by Shubham Vora </p>
<a href = "#"> Join now </a>
</div>
</div>
</body>
</html>
Example 2
We created a card similar to the first example in the example below. Here, we set the background image for the ‘card-image’ div element. Also, we set the random image by fetching it from the ‘Picsum’ website. In this card, we haven’t added the ‘join now’ anchor tag as in the first example.
<html>
<head>
<style>
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card-image {
height: 200px;
background-image: url("https://picsum.photos/300/200");
background-size: cover;
border-radius: 10px 10px 0 0;
}
.card-content { padding: 20px;}
.card-title {
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 10px 0;
}
.card-text { font-size: 1rem; margin: 0; }
</style>
</head>
<body>
<h2> Creating the <i> basic cards </i> using the CSS. </h2>
<div class = "card">
<div class = "card-image"> </div>
<div class = "card-content">
<h2 class = "card-title"> Random Image</h2>
<p class = "card-text"> This is an random image description. </p>
</div>
</div>
</body>
</html>
Example 3
In the example below, we added the hover effect on the card to show additional information.
Here, we created the card container first to create a normal card and styled it using the CSS with ‘position: relative.’ We added the ‘card-first’ and ‘card-second’ div elements inside the card container. The ‘card-first’ div element contains the information on the card, and the ‘card-second’ div element contains the information to show whenever users hover over the card.
Furthermore, we set the dimensions for CSS's ‘card-first’ div element. Also, we set dimensions for the ‘card-second’ div element in the CSS and used the ‘transform: translate(100%)’ CSS property to hide the second part. When users hover over the card element, we use the ‘transform: translateX(-100%)’ CSS property to show the second part of the card.
<html>
<head>
<style>
.card {
position: relative;
width: 300px;
height: 200px;
background-color: rgb(64, 64, 247);
color: white;
border-radius: 10px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.card-first {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
font-size: 1.7rem;
transition: transform 0.5s ease-in-out;
}
.card-second {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
}
.card:hover .card-first { transform: translateX(-100%);}
.card:hover .card-second { transform: translateX(0%); }
</style>
</head>
<body>
<h2> Creating the <i> hover effect on the card </i> to show additional information. </h2>
<div class = "card">
<div class = "card-first">
<h3> Samsung s22 </h3>
<p> 1,01,000 INR </p>
</div>
<div class = "card-second">
<p> 6.4 inch display </p>
<p> 8 GB RAM </p>
<p> 128 GB Storage </p>
<p> 64 MP Camera </p>
</div>
</div>
</body>
</html>
Example 4
In the example below, we created the ‘parent’ div element. After that, we added multiple card elements containing the image and card description.
In CSS, we used the clamp() function to set the width of the card. The clamp() function takes three parameters. First is the minimum value, second is the value in percentage, and third is the maximum value. In our case, card width will be 20% if the 20% of the screen size is between 300 and 500px. Otherwise, it will be either 300px or 500px.
Also, we set the ‘parent’ container as a flexbox to show all cards properly.
<html>
<head>
<style>
.parent {
padding: 30px 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
position: relative;
margin: 20px;
width: clamp(230px, 20%, 500px);
height: 250px;
background-color: green;
color: white;
border-radius: 10px;
transition: all 0.3s ease;
}
.card img {
width: 100%;
height: 150px;
border-radius: 10px 10px 0 0;
object-fit: cover;
}
.card-text {
padding: 20px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all 0.3s ease;
}
.card-text h3 { font-size: 24px; margin-bottom: 10px;}
.card-text p { font-size: 16px; margin-bottom: 0;}
</style>
</head>
<body>
<h3> Creating the <i> card with clamp() function </i> to manage card dimensions according to the screen dimensions </h3>
<div class = "parent">
<div class = "card">
<img src = "https://picsum.photos/300/200" alt = "Random image">
<div class = "card-text">
<h2> Card 1 </h2>
<p> This is a card description. </p>
</div>
</div>
<div class = "card">
<img src = "https://picsum.photos/300/200" alt = "Random image">
<div class = "card-text">
<h2> Card 2 </h2>
<p> This is a card description. </p>
</div>
</div>
</div>
</body>
</html>
Users learned to create modern cards using HTML and CSS. In the first two examples, we created the basic cards; in the third example, we created the cards with the hover effect. Also, we learned to use the clamp() function to handle the card size according to the device’s screen dimensions.
523 Views
