Captions on top of image

by Annett

HTML

<div class="image">
  <img alt="" src="http://www.kavoir.com/img/text-over-image.jpg" />
    <span>This lovely image gladly demonstrates how I (this text) can be flying over her face.</span>
</div>

CSS

.image {
    position:relative;
    margin: 20px;
}
.image span {
    padding: 10px;
    position:absolute;
    top:10px; /* in conjunction with left property, decides the text position */
    left:-8px;0;
    width:300px; /* optional, though better have one */
    background: blue;
    color: white;
}

.image span:before {
  content: " ";
  position: absolute;
  display: block;
  margin-bottom: -16px;
  width: 0;
  height: 0;
  left: 0;
  bottom: 0;
  border: 8px solid transparent;
  border-top-color: red;
  z-index: -1;
}