Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

How to Create a Responsive Card with Hover Effects in CSS

November 4, 2024

To create a responsive card with a hover effect using CSS, you can follow this approach. Here’s a simple example:

Code:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog Card with Hover Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1 class="card-heading">Pets Lover's Paradise</h1>
<div class="card-container">
<div class="card">
<img src="/img/Golden Retriever.jpg" alt="Golden Retriever">
<div class="card-content">
<h2>Golden Retriever</h2>
<p>Golden Retrievers are friendly, intelligent, and devoted. They make great family pets and are well-known for their gentle and loyal nature.</p>
<a href="#" class="card-button">Learn More</a>
</div>
</div>
</div>
</body>
</html>

CSS (style.css)

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}

.card-heading {
position: absolute;
top: 20px; /* Distance from the top */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Adjust to align center */
font-size: 2em;
font-weight: bold;
color: #FF6347; /* Tomato color for a warm look */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
font-family: 'Arial', sans-serif;
}

.card-container {
width: 100%;
max-width: 400px;
margin: 20px;
padding: 10px;
}

.card {
background: #ffffff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card img {
width: 100%;
height: auto;
}

.card-content {
padding: 20px;
}

.card-content h2 {
font-size: 1.5em;
margin-bottom: 10px;
}

.card-content p {
font-size: 1em;
margin-bottom: 20px;
color: #555;
}

.card-button {
text-decoration: none;
color: #ffffff;
background-color: #007bff;
padding: 10px 20px;
border-radius: 5px;
display: inline-block;
transition: background-color 0.3s;
}

.card-button:hover {
background-color: #0056b3;
}

Explanation :

Card Structure: The .card div is the main container for the card, with an image and content area.
Hover Effect: The card scales up slightly on hover by using transform: translateY(-10px) and increases the box shadow to give a lift effect.
Responsive Design: The card container is set to a max-width of 400px, making it responsive and adjusting based on the viewport size.
Button: The "Learn More" button lets users click for additional details.

This will give you a clean, responsive card with a smooth hover effect!

Tutorials Details

How to Create a Responsive Card with Hover Effects in CSS

November 4, 2024

Categories

Recent post

November 7, 2024

November 7, 2024

November 6, 2024

November 4, 2024

Get In Touch

Quick Links

Explore More

Recent post

Blog

Home / Tutorials

Tutorials Details

How to Create a Responsive Card with Hover Effects in CSS

November 4, 2024

Categories

Recent post

November 7, 2024

November 7, 2024

November 6, 2024

November 4, 2024

Get In Touch

Quick Links

Explore More

Recent post