CSS Image Overlay Title

Please Share On:

Definition:

Here, you are going to learn how a title will appear over an image when you hover your mouse cursor over the image.

Let’s begin our design.

First, create a simple <html> code without any CSS code.

For this, you need an image and a title of the text. Make an HTML container and put your image and title in it.

HTML Source Code:

    <div class="container">
      <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Text" class="image">
      <div class="overlay">This is Opera House</div>
    </div>

CSS Source Code:

<style>
      .container {
        position: relative;
        width: 100%;
        max-width: 500px;
      }

      .image {
        display:block;
        width: 100%;
        height: auto;
        opacity:1;
      }

      .overlay {
        position: absolute; 
        bottom: 0; 
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1; 
        width: 90%;
        transition: .5s ease;
        opacity:0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
      }

      .container:hover .overlay {
        opacity:1;
      }
      
    </style>

Full Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 100%;
        max-width: 500px;
      }

      .image {
        display:block;
        width: 100%;
        height: auto;
        opacity:1;
      }

      .overlay {
        position: absolute; 
        bottom: 0; 
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1; 
        width: 100%;
        transition: .5s ease;
        opacity:0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
      }

      .container:hover .overlay {
        opacity:1;
      }
      
    </style>
  </head> 

  <body> 
    <h3 class="title">Image Overlay Title</h3>

    <div class="container">
      <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Title" class="image">
      <div class="overlay">This is Opera House</div>
    </div>    
  </body>
</html>

Output:

Image Overlay Title

This is Opera House

Donate to support writers.

You may be interested in the following topics:

Post Views: 526