CODEWITHSUNDEEP
htmlcssimage
user3476085
user3476085

Reputation: 1

Image with overlay captions

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:

enter image description here

How can I do that?

Upvotes: 0

Views: 3007

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105863

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>

Upvotes: 0

dippas
dippas

Reputation: 60553

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>

Upvotes: 1

L777
L777

Reputation: 8457

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>

Upvotes: 1

Related Questions