The link above provides a nice hover effect, done with CSS and a tiny bit of javascript.

The approach is to use two divs. The outer or container div has a background image assigned through CSS. The inner div contains the text, and is hidden (display:none) on page load. The inner div uses a white background, with opacity to mute the background image and make it easier to view the image.

On hover, the inner div is changed to display:block.

Both divs have an id and class. The outer div id is required to assign the background image, the class is used to set float:left, and any other common attributes. The inner div id is used to identify it in the javascript, so the display attribute can be controlled, and the class is used to describe and position the text and opacity.

The code was written to run within a loop, hence the 1 on the ids.