Creating an image card in HTML typically involves using both HTML for structure and CSS for styling. An image card usually contains an image, some text (such as a title and description), and can include buttons or links.
Example: Basic Image Card
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.card {
width: 300px;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.card:hover {
transform: scale(1.05);
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 16px;
}
.card-title {
font-size: 1.5em;
margin-bottom: 8px;
}
.card-description {
font-size: 1em;
color: #555;
}
.card-button {
display: inline-block;
margin-top: 12px;
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
text-decoration: none;
border-radius: 5px;
text-align: center;
}
.card-button:hover {
background-color: #0056b3;
}
</style>
<title>Image Card Example</title>
</head>
<body>
<div class="card">
<img src="https://via.placeholder.com/300x200" alt="Sample Image">
<div class="card-content">
<h2 class="card-title">Card Title</h2>
<p class="card-description">This is a description of the image card. It provides some context about the image or the content inside the card.</p>
<a href="#" class="card-button">Learn More</a>
</div>
</div>
</body>
</html>
Explanation:
- HTML Structure:
- The card is wrapped in a
<div>with the classcard. - Inside the card, there is an
<img>tag for the image. - The content, including the title (
<h2>), description (<p>), and button (<a>), are inside another<div>with the classcard-content.
- The card is wrapped in a
- CSS Styling:
- Card Styling: The
.cardclass gives the card a border, rounded corners, and a box shadow for a modern look. It also includes a hover effect that scales the card slightly when hovered. - Image Styling: The image is made responsive by setting its width to
100%, ensuring it fits within the card. - Content Styling: The
.card-titleand.card-descriptiondefine the style of the text. The.card-buttonis styled like a button with background color and hover effects.
- Card Styling: The
You can modify the card’s design by adjusting the width, padding, colors, and other CSS properties.
Card Title
This is a description of the image card. It provides some context about the image or the content inside the card.
Learn More