Image Hover Effects with an Overlay
Before We Start to Create Image Hover Effects
Image Hover Effects with an Overlay can be used to animate a gallery with images or any other media content and create user attractive UI components.
So if you are a person who wishes to develop a website, you have to know how to create these kind of animations properly.
How to create Image Hover Effects with an Overlay? We are here to solve your problem. In this article we discuss how to create a hover effect animations. Before we start please read the below articles which easier you to understand the process, if you are new to development.
Step 1 – Add HTML
It’s too easy and simple. Just copy and paste below code in your HTML editor between <body> </body> tag as below.
<body>
<section>
<h1 class="main-title">Hover Effects Overlay on an Image</h1>
<div class="container">
<h3 class="title">Text fadeIn bottom</h3>
<div class="content">
<a href="javascript:void(0)" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://pixabay.com/get/gfdba2a3625424abb91a67770610e40640dfea9051c68a34661c571d0a150c5bf979b259179641db8c9174456d679b256_1280.jpg" alt="SampleImage">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Title</h3>
<p class="content-text">Description</p>
</div>
</a>
</div>
</div>
<div class="container">
<h3 class="title">Text fadeIn top</h3>
<div class="content">
<a href="javascript:void(0)" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://pixabay.com/get/gfdba2a3625424abb91a67770610e40640dfea9051c68a34661c571d0a150c5bf979b259179641db8c9174456d679b256_1280.jpg" alt="SampleImage">
<div class="content-details fadeIn-top">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
<div class="container">
<h3 class="title">Text fadeIn left</h3>
<div class="content">
<a href="javascript:void(0)" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://pixabay.com/get/gfdba2a3625424abb91a67770610e40640dfea9051c68a34661c571d0a150c5bf979b259179641db8c9174456d679b256_1280.jpg" alt="SampleImage">
<div class="content-details fadeIn-left">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
<div class="container">
<h3 class="title">Text fadeIn right</h3>
<div class="content">
<a href="javascript:void(0)" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://pixabay.com/get/gfdba2a3625424abb91a67770610e40640dfea9051c68a34661c571d0a150c5bf979b259179641db8c9174456d679b256_1280.jpg" alt="SampleImage">
<div class="content-details fadeIn-right">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
<div class="container">
<h3 class="title">Text fadeIn top left</h3>
<div class="content">
<a href="javascript:void(0)" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://pixabay.com/get/gfdba2a3625424abb91a67770610e40640dfea9051c68a34661c571d0a150c5bf979b259179641db8c9174456d679b256_1280.jpg" alt="SampleImage">
<div class="content-details fadeIn-top fadeIn-left">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
<div class="container">
<h3 class="title">Text fadeIn top right</h3>
<div class="content">
<a href="javascript:void(0)" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://pixabay.com/get/gfdba2a3625424abb91a67770610e40640dfea9051c68a34661c571d0a150c5bf979b259179641db8c9174456d679b256_1280.jpg" alt="SampleImage">
<div class="content-details fadeIn-top fadeIn-right">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
<div class="container">
<h3 class="title">Text fadeIn bottom left</h3>
<div class="content">
<a href="javascript:void(0)" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://pixabay.com/get/gfdba2a3625424abb91a67770610e40640dfea9051c68a34661c571d0a150c5bf979b259179641db8c9174456d679b256_1280.jpg" alt="SampleImage">
<div class="content-details fadeIn-bottom fadeIn-left">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
<div class="container">
<h3 class="title">Text fadeIn bottom right</h3>
<div class="content">
<a href="javascript:void(0)" target="_blank">
<div class="content-overlay"></div>
<img class="content-image" src="https://pixabay.com/get/gfdba2a3625424abb91a67770610e40640dfea9051c68a34661c571d0a150c5bf979b259179641db8c9174456d679b256_1280.jpg" alt="SampleImage">
<div class="content-details fadeIn-bottom fadeIn-right">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
</div>
</section>
</body>
Step 2 – Add CSS
We use some external CSS link to this code. No need to worry about this, copy and paste below code between <head></head> tag.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
Copy and paste below code in your HTML editor between <style></style> tag as below.
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
background: #f9f9f9;
font-size: 16px;
font-family: 'Raleway', sans-serif;
}
.main-title {
color: #2d2d2d;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0;
}
.container {
padding: 1em 0;
float: left;
width: 50%;
}
@media screen and (max-width: 640px) {
.container {
display: block;
width: 100%;
}
}
@media screen and (min-width: 900px) {
.container {
width: 33.33333%;
}
}
.container .title {
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.content {
position: relative;
width: 90%;
max-width: 400px;
margin: auto;
overflow: hidden;
}
.content .content-overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
height: 99%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.content:hover .content-overlay {
opacity: 1;
}
.content-image {
width: 100%;
background-color: #f7f7f7;
}
.content-details {
position: absolute;
text-align: center;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.content:hover .content-details {
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3 {
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p {
color: #fff;
font-size: 0.8em;
}
.fadeIn-bottom {
top: 80%;
}
.fadeIn-top {
top: 20%;
}
.fadeIn-left {
left: 20%;
}
.fadeIn-right {
left: 80%;
}
</style>
At the end we will have something like this. You can change fonts, colors, backgrounds and all things that you want. Enjoy it.
Video Tutorial
Please watch this video to better understand this tutorial and don’t forget to subscribe to our channel.
Help others to find out about this article on Social Media sites. If you have any doubt or any problem, don’t hesitate to contact us. Thereafter we will be able to help you and also make sure you bookmark our site on your browser.
