How to create image hover overlay effect

byCodingFlicks -November 21, 2024

0

How to create image hover overlay effect

The image hover overlay animation effect is a special web design technique used to apply visual effects to an image after hovering over it. This kind of animation is normally created using HTML and CSS. In this Blog Post, we will create a nice Image hover overlay animation effect using HTML and CSS. We also used the Bootstrap framework to make the snippet responsive. Below we have a step-by-step video tutorial regarding this snippet. We Hope you will watch the entire video.

Video Tutorial:

We hope you enjoyed the video tutorial. Image hover overlay animation is commonly used to grab users' attention. Web developers add interactive elements to attract visitors. This type of animation enhances the aesthetics of the website or app, which means giving the website or app a modern and professional look. Portfolio websites use it to display project details. E-commerce websites use this technique to display product details or options. Blog websites use it to highlight featured content. Photography and design gallery websites use it for captions and credits. CSS image hover overlay animation is important for improved UX, dynamic content presentation, brand identity, etc.

We have used CSS animation in this project. As we know, CSS animation is a special technique that helps to animate HTML elements without relying on JavaScript. It is very popular for its ease of use, browser support, performance, and customization features. In our snippet, when we hover over each image, a black overlay will cover up the entire image. After that, a yellow line will go over the image and the text elements or captions will appear from below. We all know how important responsive web design is in modern web design. That is why, we made this snippet responsive with the help of Bootstrap framework.

You May Also like:

How to create image hover overlay effect [ Source Code ]:

To create the CSS animation snippet, we have to create an HTML file and a CSS file. The entire process is shown in the video tutorial above. After that, you have to copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if there are any problems. If the problem persists, you can download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->	
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Hover CSS Animation with Caption Overlay</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="team-area">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-6">
					<div class="team-member">
						<img src="img/1.jpg">
						<div class="team-text">
							<h3>Sarah Brown</h3>
							<h4>Designation</h4>
							<p>
								<i class="fa fa-facebook"></i>
								<i class="fa fa-twitter"></i> 
								<i class="fa fa-linkedin"></i>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-sm-6">
					<div class="team-member">
						<img src="img/2.jpg">
						<div class="team-text">
							<h3>Emily Davis</h3>
							<h4>Designation</h4>
							<p>
								<i class="fa fa-facebook"></i> 
								<i class="fa fa-twitter"></i> 
								<i class="fa fa-linkedin"></i>
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-sm-6">
					<div class="team-member">
						<img src="img/3.jpg">
						<div class="team-text">
							<h3>Jessica Williams</h3>
							<h4>Designation</h4>
							<p>
								<i class="fa fa-facebook"></i> 
								<i class="fa fa-twitter"></i> 
								<i class="fa fa-linkedin"></i>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

ADD CSS:

body {
	background: #262626;
	font-family: "Poppins", sans-serif;
}
.team-area {
	margin-top: 15%;
}
h3, p {
	margin: 0;
}
.team-member:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	opacity: 0;
	transition: all 0.5s ease 0s;
}
.team-member:hover:before {
	opacity: 1;
}
.team-member {
	text-align: center;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.team-member:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	left: 170%;
	top: 0;
	transform: skewX(45deg);
	transition: all 1s ease 0s;
	background-color: darkorange;
	z-index: 1;
}
.team-member:hover:after {
	left: -170%;
	top: 0;
}
.team-member img {
	width: 100%;
	height: auto;
}
.team-member .team-text {
	position: absolute;
	bottom: -100%;
	left: 0;
	width: 100%;
	transition: all 0.5s ease 0s;
}
.team-member:hover .team-text {
	bottom: 30%;
}
.team-member .team-text h3 {
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 10px;
}
.team-member .team-text h4 {
	font-style: italic;
	font-weight: 600;
	display: block;
	font-size: 15px;
}
.team-text p i {
	margin: 0 7px;
}
@media screen and (max-width:800px) {
	.team-member {
		margin-bottom: 30px !important;
	}
}

This CSS animation technique is widely used in most modern websites these days. This type of CSS overlay animation enhances user interaction and aesthetics by providing a dynamic response to images. Image hover overlay animation with CSS gives a professional look to any website. It contributes to a better user experience. We hope you have collected the source code. For more, visit our homepage and click on the Load More button. Thank you for visiting our website.

DOWNLOAD CODE

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