In the context of web design, it's all about making dynamic and interesting user experiences(UI). Adding picture overlay effects to the website is a good method to improve the aesthetic appeal, especially when users interact with it by hovering over images. This article will walk you through the steps to create a seamless image overlay fade-in text effect on hover using HTML and CSS.
Prerequisites
Approach
- Create an HTML file named index.html with the provided structure
- Link the HTML file to an external CSS file name style.css.
- Write the CSS styles in the external file to define the layout, colors, and transitions.
- Replace placeholder text and image URLs with your actual content.
- Use :hover selector and opacity property to achieve the overlay fade effect.
Example: This example demonstrate how to create an image overlay fade-in text effect using the above approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Overlay Fade-In Text Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3 class="title">Text Fade-In Effect</h3>
<div class="content">
<a href="" target="_blank">
<div class="content-overlay"></div>
<img class="content-image"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240312114254/bgg.jpg"
alt="">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Example 1</h3>
<p class="content-text">
In the context of web design, it's all about
making dynamic and interesting user experiences(UI).
Adding picture overlay effects to the website is a
good method to improve the aesthetic appeal,
especially when users interact with it by
hovering over images.
</p>
</div>
</a>
</div>
</div>
<div class="container">
<h3 class="title">Text Fade-In Effect</h3>
<div class="content">
<a href="" target="_blank">
<div class="content-overlay"></div>
<img class="content-image"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240312114254/bgg.jpg"
alt="">
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Example 2</h3>
<p class="content-text">
<button>Click Me</button>
</p>
</div>
</a>
</div>
</div>
</body>
</html>
CSS
body{
background: #f9f9f9;
font-size: 16px;
font-family: sans-serif;
padding: 5rem 0;
display: flex;
}
.container{
padding: 1em 0;
width: 50%;
}
.container .title{
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
font-size: 25px;
}
.content {
position: relative;
max-width: 500px;
margin: auto;
overflow: hidden;
}
.content .content-overlay {
background: rgba(0,0,0,1);
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%;
}
.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%;
}
Output: