Preview - THEME-CENTRE.COM

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <title>Image Overlay</title> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
          
        .container img { 
            width: 250px; 
            height: 250px; 
        } 
          
        .container { 
            position: relative; 
            width: 400px; 
            height: auto; 
        } 
          
        .overlay { 
            position: absolute; 
            transition: all 0.3s ease; 
            opacity: 0; 
            background-color: yellow; 
             font-family: "Open Sans";
          font-size:30px;
          color: purple;
          font-weight: 600;
          
       
               
        } 
          
        .container:hover .overlay { 
            opacity: 1; 
        } 
          
        .overlayFade { 
            height: 250px; 
            width: 250px; 
            top: 0; 
            left: 75px; 
            background-color: yellow; 
          display: flex;
    align-items: center;
          
         
         
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="title"> 
      Overlay 
    </h1> 
       
        <div class="container"> 
            <img src= 
"https://theme-centre.com/thumb/Singapore%20City.jpg" 
                 class="image"> 
            <div class="overlay overlayFade">Management Consultancy</div> 
        </div> 
    </center> 
</body> 
  
</html>

HTML FORMS / CSS / Overlay