How CSS Make Text Top of Image

The elements that we will use in this post are:

<div id='parent'><img src='/images/picture.jpg' /><span>How to SOP</span></div>

There're four key points to make the text to be over the image:

1. The position must be set as relative in the parent block, in this case, we use <div> to enclose the image.
2. The position must be set as absolute in the child text block, in this case, we use <span> to follow the image.
3. To make the top position of text block to be 75% of parent div.
4. To make the left position of text block to be 0% of parent div.

The followings are sample CSS:

div#parent {
  position: relative;
  height: 256px;
  width: 256px;
  line-height: 256px;
  border: 2px dotted silver;
  float: left;
  background-color: white;
  text-align: center;
}
div#parent img {
  max-width: 256px;
  height: auto;
  vertical-align: middle;
}

div#parent span {
  position: absolute;
  top: 75%;
  left: 0%;
  width: 100%;
  height: 10%;
  line-height: 1;
  background-color: rgba(0,0,0,0.5);
  color:white;
}

The output will be like this: