Responsive CSS card Overlay Animation

Responsive CSS Cards

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.

Video Tutorial:

I hope you have seen the video tutorial. 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. 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.

You May Also Like:

Responsive CSS Card overlay animation [ Source Code ]:

In order to make this Responsive CSS Card overlay animation, You must create an HTML file as well as a CSS file. The following codes in the code boxes should then be copied and pasted into your project. You can get the same code from the download button below if there is a problem.

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%;
}

We hope the animation is working for you. On our website, you may find snippets on topics like CSS animation, responsive website design, landing page design, and many more. Click the load more button located below our website if you want to collect more source code. Please spread the word about our website's content if you enjoy it. We appreciate you visiting our website.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box