How to Create an Image Overlay Fade in Text Effect on Hover using CSS ?

Last Updated : 20 Mar, 2024

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.

output

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