I have created a demonstration using display: inline-block instead of table-cell, allowing for wrapping without unnecessary HTML markup.
Main CSS Attributes
The text is centered using a pseudo element called .product:before. This element vertically aligns the inline text in the middle. For compatibility with IE6 - 7, you can use a div instead.
The text inside .product has 0 opacity until it is hovered over.
The image uses position: absolute to position itself relative to its parent with position: relative, allowing it to be moved outside the normal flow for alignment purposes.
Transitions are applied to smoothen the opacity changes. A white border is initially set on .product which transitions to black when hovered over.
Note: There is currently no fallback for browsers that do not support opacity, like IE6 and IE7. To address this, you can use display: none in a conditional stylesheet for these browsers.
2 Example Scenarios
Click "Show code snippet" to run them.
No Need for an Unnecessary Div
The class .product is assigned to the <a> element, making the entire box a clickable link.
<a class="product" href="http://kingfisher.org.au/library-shelving">
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
<h2>Library Shelving</h2>
</a>
.product {
width: 250px;
height: 250px;
display: inline-block;
vertical-align: middle;
position: relative;
border: solid 1px #FFF;
transition: border 1s;
text-align: center;
}
.product:before {
height: 100%;
content: '';
display: inline-block;
vertical-align: middle;
}
.product img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.5s;
}
.product:hover {
border: solid 1px #000;
}
.product:hover img {
opacity: 0;
}
.product h2 {
opacity: 0;
transition: opacity 0.5s;
font-weight: none;
display: inline;
font-size: 1em;
}
.product:hover h2 {
opacity: 1;
}
.product {
text-decoration: none;
}
<a class="product" href="http://kingfisher.org.au/library-shelving">
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
<h2>Library Shelving</h2>
</a>
Using a Div - Keeping Clicks Controlled
The class .product applies to a div containing both the image and text, where only the text functions as a link.
The <a> is given relative positioning to ensure it remains clickable, especially for IE8 and IE9.
The image is layered beneath the <a> by setting its z-index to 1.
<div class="product">
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
<a href="http://kingfisher.org.au/library-shelving">
Library Shelving
</a>
</div>
.product {
width: 250px;
height: 250px;
display: inline-block;
vertical-align: top;
position: relative;
text-align: center;
border: solid 1px #FFF;
transition: border 1s;
}
.product:before {
height: 100%;
content: '';
display: inline-block;
vertical-align: middle;
}
.product img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.5s;
z-index: 1;
}
.product:hover {
border: solid 1px #000;
}
.product:hover img {
opacity: 0;
}
.product a {
position: relative;
text-decoration: none;
font-weight: normal;
opacity: 0;
transition: opacity 0.5s;
z-index: 2;
}
.product:hover a {
opacity: 1;
}
a:hover {
text-decoration: underline;
}
<div class="product">
<img src="http://kingfisher.org.au/pic/library_shelving.jpg" />
<a href="http://kingfisher.org.au/library-shelving">
Library Shelving
</a>
</div>