How do I create a picture like this?

[njmitchel0]

http://hypebeast.com/2013/2/essentials-frank-cooke-of-wish

Im trying to create a picture like this where a caption appears when you click on a certain element. Any help appreciated, thanks.

 

[jared_kipe]

Bounding div with position: relative. Whole bunch of nested elements with position: absolute.

All of those plus icons, and their associated text are the nested (position: absolute) items.

Then they use javascript to hide all the text and display them on hover.

 

[jared_kipe]

Start off easy, then start to make it more complicated.

<div style="position: relative; background: green; width: 500px; height: 400px;">
<div style="position: absolute; top: 100px; left: 50px; width: 10px; height: 10px; background: blue;">
 
</div>
<div style="position: absolute; top: 200px; left: 450px; width: 10px; height: 10px; background: blue;">
 
</div>
</div><!-- green div -->

This will make a green box with two small blue boxes inside of it positioned absolutely.

If you don't understand that conceptually, you just need an HTML book.