Overlay on Image | CSS Animations

byCodingFlicks -December 15, 2020

0

Today I will share another simple CSS animation snippet based on overlay on the image after hover. I have used pure HTML and CSS to design this snippet. I have shared a couple of CSS animation based projects before. Check those out if you are interested. Without further explanation, I am providing the code. Download the code from below and modify it according to your needs.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS image hover Overlay Effect</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;900&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="box">
		<div class="single-box">
			<div class="box-area"><img alt="" src="https://i.postimg.cc/CL7Xcjp1/1.jpg"></div>
			<div class="box-area custom">
				<div class="overlay">
					<div class="text-content">
						<h2>Person One</h2>
						<h3>Designation</h3>
					</div>
				</div>
			</div>
		</div>
		<div class="single-box">
			<div class="box-area"><img alt="" src="https://i.postimg.cc/sDTHYs5G/2.jpg"></div>
			<div class="box-area custom">
				<div class="overlay">
					<div class="text-content">
						<h2>Person two</h2>
						<h3>Designation</h3>
					</div>
				</div>
			</div>
		</div>
		<div class="single-box">
			<div class="box-area"><img alt="" src="https://i.postimg.cc/Jzt6KvQ6/3.jpg"></div>
			<div class="box-area custom">
				<div class="overlay">
					<div class="text-content">
						<h2>Person three</h2>
						<h3>Designation</h3>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	background: #fdf513;
}
.box {
	width: 1170px;
	margin: 10% auto;
}
.single-box {
	width: 380px;
	height: 380px;
	position: relative;
	float: left;
	margin: 0 5px;
	box-shadow: 0 25px 15px rgba(0, 0, 0, 0.5);
}
.box-area {
	position: absolute;
	top: 0;
	left: 0;
}
.box-area img {
	width: 100%;
}
.custom {
	width: 0;
	transition: 1s;
	overflow: hidden;
}
.single-box:hover .custom {
	width: 100%;
}
.overlay {
	width: 380px;
	height: 380px;
	text-align: center;
	background: #000;
}
.overlay h2 {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 30px;
	text-transform: uppercase;
	line-height: 1.8;
	font-weight: 900;
	letter-spacing: 2px;
}
.overlay h3 {
	margin: 0;
	padding: 0;
	font-size: 20px;
	color: #fff;
	font-weight: 100;
	letter-spacing: 3px;
}
.text-content {
	padding: 40% 10%;
}

I hope you find it useful. For more source code snippets, please follow our social media profiles to stay connected with this blog. Thank you for stopping by.

Please do not enter any spam link in the comment box.