`

```I try to do this way but it does not work. How can I overlay on an image.

  &l开发者_Go百科t;div class="banner_img">  

    <img src="images/catimage.jpg" alt="It is a cat image" width="300px" height="200px">  <br/>

 </div>    


  
 
 ```
 `

Edit the code to fit your needs.

CSS & HTML:

* {box-sizing: border-box;}
    
    .container {
      position: relative;
      width: 50%;
      max-width: 300px;
    }
    
    .img{
      display: block;
      width: 100%;
      height: auto;
    }
    
    .youroverlaydiv{
      position: absolute; 
      bottom: 0; 
      background: rgb(0, 0, 0);
      background: rgba(0, 0, 0, 0.5); /* Black see-through */
      color: #f1f1f1; 
      width: 100%;
      transition: .5s ease;
      opacity:0;
      color: white;
      font-size: 20px;
      padding: 20px;
      text-align: center;
    }
    
    .container:hover .youroverlaydiv{
      opacity: 1;
    }

 <div class="container">
  <div class="banner_img">  
        <img src="https://images.unsplash.com/photo-1524749292158-7540c2494485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="It is a cat image" width="300px" height="200px" class="img"> 
        <div class="youroverlaydiv">This is your overlay.</div>
  </div>

 </div>