Code LOL

This effect is similar to the front page of AllKpop, which has an image link with a transparent black text box with white text on top. This effect can be done using CSS, with code taken from the WordPress theme Infinity.

What is important is the (.thumb width) = (.thumb title h2 a width) + 2*(.thumb title h2 a padding).  This ensures the text is properly centered in the image.

The basic CSS is as follows:

.thumb {
  background: #fff;
  display: block;
  width: 190px;
  overflow: hidden;
  height: 250px;
  position: relative; }
.thumb-title {
  margin-bottom:0px;
  background:#000;
  bottom:0;
  right:0;
  display:block;
  position:absolute;
  padding:0px;
  filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;}
.thumb-title:hover { background:#222; }
.thumb-title h2 { margin: 0px;}
.thumb-title h2 a {
  padding: 10px;
  font:14px Arial,helvetica;
  display:block;
  color:#fff;
  text-decoration: none;
  width: 170px;}
.thumb-title h2 a:hover {
  padding: 10px;
  font:14px Arial,helvetica;
  display:block;
  color:#fff;
  text-decoration: none;
  width: 170px;}

Usage example:

<div class="thumb powered">
<a href="http://example.com"><img src="/img/example.jpg"/></a>
<div class="thumb-title"><h2>
<a href="http://example.com">Example</a></h2></div>
</div>