I didn't test it in any other browser than chrome - left as an exercise for the reader ;-)
So what does it do? The html add the images and the explanation you want to show upon hover in a <span> inside an <a>. They all sit in a <div> that has a class to allow the CSS to only latch on to that. It could be arguead that a list is a better choice, and I'd follow the argument in a real case in all likelihood. But for simplicity's sake I'll leave it to a div for now.
The css in there is a bit more interesting: - First there's a reset of browser default borders, margins and paddings in order not to have to deal with them anymore. - next the anchor elements (<a>) that are children on the div with class="images" are made a block element (they are by default inline), given a size and floated to the left. If there are enough and the window is narrow enough, they'll start a new line as needed. They are given a margin to stop them from sticking to each other and a border to make sure you see them in your tests. The text decoration is the underline of the text that we need to turn off here. - the images inside the <a> elements are given the same size as the parent <a> - the spans inside the <a> elemnets are styled and hidden (we'll unhide them alter) their margin makes their text not sit flush with the border of the <a> element. - when we hover over the <a> element, we show the span (using display:block) and hide the <img> element (using: display:none) - the last line is a "clearfix" style thing: sinze we have floated elements, anything following them would get pushed to a sade and not get pushed downward. The eastiest solution is to make the next element (*) that comes after the div with class images to have the clear property.
That's it basically. You can enhance this at will.