title: Image description box on image with css & html
body: <p>I'm trying to create a image description box on the image and I want the image to a fade when you hover over the image.</p>
  
  <p><strong>This is what I want to acheive:</strong>
  <a href="https://i.stack.imgur.com/y4M3c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y4M3c.png" alt="enter image description here"></a></p>
  
  <p><strong>On hover I want this:</strong>
  <a href="https://i.stack.imgur.com/l3B64.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l3B64.png" alt="enter image description here"></a></p>
  
  <p><strong>This is what I got so far:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="app-img-wrapper"&gt;
  &lt;a href="images/Example/pexels-photo-344544.jpeg" title="Image 1"&gt; &lt;img src="images/Example/pexels-photo-344544.jpeg" class="img-responsive" alt="App"&gt; &lt;h2&gt;&lt;span&gt;Image Text&lt;/span&gt;&lt;/h2&gt; &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.app-img-wrapper {
      position: sticky;
  }
  
  .app-img-wrapper h2 {
      position: absolute;
      bottom: 0%;
      left: 0;
      width: 100%;
  }
  
  .app-img-wrapper h2 span{
      color: white;
      font-size: 35px;
      font-weight: 400;
      text-align: center;
      /* fallback color */
      background: rgba(0, 0, 0, 0.7);
      padding: 10px;
  }
  </code></pre>
  
  <p><strong>Result:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/DCm3E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DCm3E.png" alt="enter image description here"></a></p>
  
  <p>As you can see, I'm almost there but having trouble with matching the box to the image size. If anyone has any tips please suggest below</p>