Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Modern CSS Cards
Modern CSS cards are essential components for displaying information in an organized, visually appealing format. They're commonly used on e-commerce sites to showcase products, on educational platforms for courses, and across various websites to present content in digestible chunks.
Syntax
.card {
display: flex;
flex-direction: column;
border-radius: value;
box-shadow: value;
width: value;
background-color: value;
}
Example 1: Basic CSS Card
This example creates a simple card with an image, title, description, and call-to-action button
<!DOCTYPE html>
<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;
margin: 20px;
}
.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: cover;
}
.card-content {
padding: 20px;
}
.card h3 {
font-size: 1.4rem;
margin-top: 0;
}
.card p {
font-size: 1rem;
margin-bottom: 15px;
}
.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>
<div class="card">
<img src="https://picsum.photos/300/150" alt="Course Image">
<div class="card-content">
<h3>Python Programming</h3>
<p>Learn Python programming from basics to advanced concepts</p>
<a href="#">Join Now</a>
</div>
</div>
</body>
</html>
A white card with rounded corners appears, featuring an image at the top, followed by a title "Python Programming", description text, and a dark "Join Now" button. The card has a subtle shadow that intensifies on hover.
Example 2: Card with Background Image
This example demonstrates using a background image instead of an img tag
<!DOCTYPE html>
<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);
overflow: hidden;
margin: 20px;
}
.card-image {
height: 200px;
background-image: url("https://picsum.photos/320/200");
background-size: cover;
background-position: center;
}
.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;
color: #666;
}
</style>
</head>
<body>
<div class="card">
<div class="card-image"></div>
<div class="card-content">
<h2 class="card-title">Nature Photography</h2>
<p class="card-text">Discover the beauty of nature through stunning photography</p>
</div>
</div>
</body>
</html>
A card with a full-width background image at the top and white content area below containing the title "Nature Photography" and description text.
Example 3: Card with Hover Animation
This example creates an interactive card that reveals additional information on hover
<!DOCTYPE html>
<html>
<head>
<style>
.card {
position: relative;
width: 300px;
height: 200px;
background-color: #4a90e2;
color: white;
border-radius: 10px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
overflow: hidden;
margin: 20px;
}
.card-first {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
font-size: 1.2rem;
transition: transform 0.5s ease-in-out;
display: flex;
flex-direction: column;
justify-content: center;
}
.card-second {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
background-color: #357abd;
display: flex;
flex-direction: column;
justify-content: center;
}
.card:hover .card-first {
transform: translateX(-100%);
}
.card:hover .card-second {
transform: translateX(0%);
}
</style>
</head>
<body>
<div class="card">
<div class="card-first">
<h3>Samsung Galaxy S22</h3>
<p>?1,01,000</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>
A blue card showing "Samsung Galaxy S22" and price initially. When hovered, it slides to reveal detailed specifications with checkmarks in a darker blue background.
Example 4: Responsive Card Layout
This example uses CSS clamp() function to create responsive cards that adapt to screen size
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
padding: 30px 5%;
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.card {
width: clamp(250px, 30%, 350px);
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-text {
padding: 20px;
}
.card-text h3 {
font-size: 1.4rem;
margin-bottom: 10px;
color: #333;
}
.card-text p {
font-size: 1rem;
color: #666;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="parent">
<div class="card">
<img src="https://picsum.photos/300/200?random=1" alt="Card Image">
<div class="card-text">
<h3>Web Development</h3>
<p>Master modern web development with HTML, CSS, and JavaScript</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/300/200?random=2" alt="Card Image">
<div class="card-text">
<h3>Data Science</h3>
<p>Learn data analysis and machine learning fundamentals</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/300/200?random=3" alt="Card Image">
<div class="card-text">
<h3>Mobile Apps</h3>
<p>Build cross-platform mobile applications efficiently</p>
</div>
</div>
</div>
</body>
</html>
Three responsive cards arranged in a flexible grid layout. Each card has an image, title, and description. The cards resize based on screen width using the clamp() function and lift slightly on hover.
Conclusion
Modern CSS cards provide an excellent way to organize and present content effectively. Using flexbox, transitions, and responsive techniques like clamp(), you can create engaging, interactive cards that enhance user experience across all devices.
Updated on: 2026-03-15T17:21:27+05:30
919 Views
Advertisements