Hover box is a component with additional hidden text layer, which becomes visible on hover and covers original box with image – in few combinations. Feel free to download it in package or as a single css file and use it in your project. Or just read the instructions how to make it by yourself.

Width and height of boxes are not defined in my CSS or HTML code, they fit provided image size. If the image is too large, you need to define width by parent element e.g. Twitter Bootstrap column, like “col-sm-3” (then height adjusts automatically to width). The only exception is in second example with image as a background on bottom layer – here you must write a rule in CSS to define width and height of the box.

Live Demo: http://css-workshop.com/examples/hover-box/

File: Download