CSS cards are a useful element in modern web design. Through this card, any information, service, or product can be presented to visitors in a visually attractive manner. These CSS cards are also known as content cards. It makes web elements like titles, images, text, and buttons visually appealing. Today we will create some responsive CSS cards or image hover overlays whose image-related info such as heading, text, and call-to-action buttons are visible on hover. In combination with the background color, we used a gradient color for the overlay. Check out the following tutorial video to see how to make the cards in detail.
The use of CSS cards is one of the most popular ways to display information. These cards are convenient because they are easy to understand and modify. These cards can fit into any screen size because they are responsive by nature.
You May Also Like:
Responsive User Profile Card Design
Javascript Random Password Generator
Javascript Word Counter Widget
In our snippet, we have three single divs inside the container div called 'box-area'. Each of these has an image and overlay information added. First, the child div's container is vertically aligned with the CSS Display Grid property. Each box has an overlay element with a height of 0 and a background gradient that goes from transparent to #1c1c1c color. This overlay will be hidden by default but hovering over will make the image scale up and the overlay expands to cover the entire box revealing the heading, text, and the call to action button.
Responsive CSS card Overlay Animation [ Source Code ]:
ADD HTML:
<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>CSS Cards with Overlay Hover Animation/title></title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="card-area">
<div class="wrapper">
<div class="box-area">
<div class="box">
<img alt="" src="img/1.jpg">
<div class="overlay">
<h3>Mountaineering</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque modi explicabo libero ea nam. Quod.</p><a href="#">Book Now</a>
</div>
</div>
<div class="box">
<img alt="" src="img/2.jpg">
<div class="overlay">
<h3>Scuba Diving</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque modi explicabo libero ea nam. Quod.</p><a href="#">Book Now</a>
</div>
</div>
<div class="box">
<img alt="" src="img/3.jpg">
<div class="overlay">
<h3>Travel World</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque modi explicabo libero ea nam. Quod.</p><a href="#">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ADD CSS:
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body{
background: #1e1f21;
color: #fff;
}
.wrapper{
padding: 10px 10%;
}
#card-area{
padding: 50px 0;
}
.box-area{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 40px;
margin-top: 50px;
}
.box {
border-radius: 10px;
position: relative;
overflow: hidden;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.box img{
width: 100%;
border-radius: 10px;
display: block;
transition: transform 0.5s;
}
.overlay {
width: 100%;
height: 0;
background: linear-gradient(transparent,#1c1c1c 58%);
border-radius: 10px;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
font-size: 14px;
transition: height 0.5s;
}
.overlay h3 {
font-weight: 500;
margin-bottom: 5px;
margin-top: 80%;
font-family: 'Bebas Neue', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
.overlay a {
margin-top: 10px;
color: #262626;
text-decoration: none;
font-size: 14px;
background: #fff;
border-radius: 50px;
text-align: center;
padding: 5px 15px;
}
.box:hover img{
transform: scale(1.1);
}
.box:hover .overlay{
height: 100%;
}
Top comments (0)