Modern image card hover design using HTML & CSS
sample output
Digital code hub
Digital Code Hub
This is a description of the image.
HTML CODE
<html>
<head>
<title>Digital code hub</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div class="box">
<div class="image-card">
<img alt="Sample Image" src="image.png" />
<div class="card-content">
<h3>Digital Code Hub</h3>
<p>This is a description of the image.</p>
</div>
</div>
</div>
</body>
</html>
CSS CODE
/* Basic styling for the image card */
.image-card {
width: 300px;
margin: 0 auto; /* Center the image card */
border: 5px solid #159AB4;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s ease-in-out;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}
.image-card:hover {
transform: translateY(-100px);
}
.image-card img {
width:100%;
height: auto;
display: block;
border: 1px solid #159AB4;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
.card-content {
padding: 15px;
}
.card-content h3 {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.card-content p {
font-size: 14px;
color: #666;
}
.body box{
align-items: center;
color: #191818;
}
Digital Code Hub
This is a description of the image.
HTML CODE
<html>
<head>
<title>Digital code hub</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div class="box">
<div class="image-card">
<img alt="Sample Image" src="image.png" />
<div class="card-content">
<h3>Digital Code Hub</h3>
<p>This is a description of the image.</p>
</div>
</div>
</div>
</body>
</html>
CSS CODE
/* Basic styling for the image card */
.image-card {
width: 300px;
margin: 0 auto; /* Center the image card */
border: 5px solid #159AB4;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s ease-in-out;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}
.image-card:hover {
transform: translateY(-100px);
}
.image-card img {
width:100%;
height: auto;
display: block;
border: 1px solid #159AB4;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
.card-content {
padding: 15px;
}
.card-content h3 {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.card-content p {
font-size: 14px;
color: #666;
}
.body box{
align-items: center;
color: #191818;
}
Tags
html & css