Код

<figure class="ink-image">
  <img src="img/img-6.jpg">
  <figcaption class="dark">
     Подпись на тёмном фоне.
  </figcaption>
</figure>
<figure class="ink-image">
  <img src="img/img-7.jpg">
  <figcaption class="light">
     Подпись на светлом фоне.
  </figcaption>
</figure>


CSS

/* группируем картинки */
figure {
    margin: 0px;
}
/* position: relative; обязательно, остальное опционально */
figure.ink-image {
    position: relative;
    border: 1px solid #555;
}
/* изображения резиновые */
figure.ink-image > img {
    border: 0px none;
    width: 100%;
    vertical-align: top;
}
/* формируем подписи к картинкам */
figure.ink-image > figcaption {
    padding: 1em;
    line-height: 1.3;
    font-family: 'Roboto', sans-serif;  
    font-weight: 400;
}
/* выделенные подписи с фоном */
/* подпись на тёмном фоне */
figure.ink-image > figcaption.dark {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 8px;
  color: white;
  margin: 0;
  font: 14px Sans-Serif;
}
/* подпись на светлом фоне */
figure.ink-image > figcaption.light {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.75);
  padding: 4px 8px;
  color: black;
  margin: 0;
  font: 14px Sans-Serif;  
}