Image with overlay captions - html

Question

I have a problem with image descriptions. I have HTML structure like this:
<div class="scrollable-content" data-mcs-theme="dark-thick" style="padding: 0px; overflow-x: auto;">
<ul style="list-style: none; white-space:nowrap; padding: 0px;">
#foreach($projects as $project)
<li style="display: inline; margin: 0px;">
<a href="{!! url($locale.'/projects/project/'.$project->id) !!}">
<img class="project-cover-image" src="/images/{!! $project->cover_image_name !!}" height="250px" width="auto">
</a>
</li>
#endforeach
</ul>
</div>
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.
The problem is, whatever I do, I either get description that takes 100% width of the page, or it has width of the text inside it.
I have tried doing it with div, span, different combinations of position absolute/relative, everything and I couldn't manage to make it work.
It should look something like this:
How can I do that?

Answer 1

You have two options (wich produce the same result):
1- A div with a image as background, and a subtitle inside this div;
#image {
width:550px;
height:150px;
position:relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size:100% 100%;
}
.coverdown {
color: white;
width: 100%;
height: 30%;
position:absolute;
bottom:0%;
background: rgba(0,0,0,0.5);
text-align: center;
}
<div id="image">
<div class="coverdown">Subtitle here with a description.</div>
</div>
2- The image and a subtitle with position:absolute inside a position:relative container;
#container {
width:550px;
height:150px;
position:relative;
}
img {
width:550px;
height:150px;
position:absolute;
top:0px;
left:0px;
}
.subtitle {
color: white;
width: 100%;
height: 30%;
position:absolute;
bottom:0%;
background: rgba(0,0,0,0.5);
text-align: center;
}
<div id="container">
<img src="http://i.imgur.com/HNj6tRD.jpg" alt=img>
<div class="subtitle">Subtitle here with a description.</div>
</div>

Answer 2

use position:relative/absolute
body {
margin: 0
}
.scrollable-content {
padding: 0;
overflow-x: auto
}
ul {
list-style: none;
white-space: nowrap;
padding: 0;
margin:0
}
li {
position: relative;
display:inline-block
}
span {
background: rgba(0, 0, 0, .5);
display: inline-block;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%
}
img {
display: block
}
a {
color: #fff
}
<div class="scrollable-content" data-mcs-theme="dark-thick">
<ul>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/250/250">
<span>description</span>
</a>
</li>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/500/250">
<span>description</span>
</a>
</li>
<li>
<a href="">
<img class="project-cover-image" src="//lorempixel.com/400/250">
<span>description</span>
</a>
</li>
</ul>
</div>

Answer 3

basicly, you need relative/absolute as #dippas's answer.
as I advised, use inline-block, so it gets sized by content and will allow easily to position your description.
example below with figure and figcaption.
figure can be wrap in a <a>link displayed inline-block and figure as a block then to avoid a gap underneath.
figure {
display: inline-block;
position: relative;
margin: 0;
}
img {
display: block;
max-height:80vh;height:250px/*snippet demo purpose */
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* makeup*/
background: rgba(0, 0, 0, 0.5);
color: white;
}
/* demo purpose */
div {
white-space: nowrap;
overflow:auto;
}
figure {
white-space: normal;
text-align: center;
}
<div>
<figure>
<img src="http://www.hyperkreeytiv.com/wp-content/uploads/2014/08/IMG_4973.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://4.bp.blogspot.com/-oSEWgZNEopE/TtL8kfGuBzI/AAAAAAAAB6U/b8VSzZaoK3g/s400/action_wolf_1111_photo1.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://1.bp.blogspot.com/-GfOyrk3kZ0w/TewM0BMvbNI/AAAAAAAABM0/KPm3li5Xwko/s1600/alpha+male+Wallpaper__yvt2.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
<figure>
<img src="http://www.ooyuz.com/images/2015/10/13/1447449028465.jpg" alt="wolves" />
<figcaption>
<p>these are wolves</p>
</figcaption>
</figure>
</div>