title: Image with overlay captions
body: <p>I have a problem with image descriptions. I have HTML structure like this:</p>
  
  <pre><code>&lt;div class="scrollable-content" data-mcs-theme="dark-thick" style="padding: 0px; overflow-x: auto;"&gt;
      &lt;ul style="list-style: none; white-space:nowrap; padding: 0px;"&gt;
          @foreach($projects as $project)
              &lt;li style="display: inline; margin: 0px;"&gt;
                  &lt;a href="{!! url($locale.'/projects/project/'.$project-&gt;id) !!}"&gt;
                      &lt;img class="project-cover-image" src="/images/{!! $project-&gt;cover_image_name !!}" height="250px" width="auto"&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          @endforeach
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It creates a nice looking gallery with horizontal scrollbar. But I need to add descriptions to images that will be placed at the bottom of the pictures covering whole their widths and they should have to be transparent to some degree.</p>
  
  <p>The problem is, whatever I do, I either get description that takes 100% <code>width</code> of the page, or it has <code>width</code> of the text inside it.</p>
  
  <p>I have tried doing it with <code>div</code>, <code>span</code>, different combinations of <code>position absolute/relative</code>, everything and I couldn't manage to make it work.</p>
  
  <p>It should look something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/2X6jP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2X6jP.png" alt="enter image description here"></a></p>
  
  <p>How can I do that?</p>