setting the contrast high so we just get black and white. We’ll use that wrapping div as a container for absolute positioning. removing bits of the span not covered by text. Giving it top and left 0 will make it appear in the top left. Putting the image in as a background image of the wrapping div would be easier, but in this scenario I see the images as content, and thus belongs in the HTML. You need to set the thumbnail class to position relative then the post-content to absolute. However, when I added the word Ice Cream into the HTML, the image kind of got. The z index property is used to set the arrangement of images, texts etc. Ive used CSS to resize the image and make it into a circle, so it fits perfectly. The idea is just to overlay some text over an image, but as blocks that stick out from the left with an even amount of padding all the way around the variable-length text. You can write text over an image by using the z-index property of CSS. But then I got to thinking that there is actually a few interesting things happening here and the style is trendy enough people might be interested.

Someone recently asked me about this technique and my first reaction was that it was probably a little too mundane to cover as a tutorial.

Overlay text on image html