<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:
- The position must be set as relative in the parent block, in this case, we use <div> to enclose the image.
- The position must be set as absolute in the child text block, in this case, we use <span> to follow the image.
- To make the top position of text block to be 75% of parent div.
- 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:
