Text Blocks Over Image

Movie in the Park: Kung Fu Panda

HTML

<div class="image">
  <img src="test.jpg" alt="" />
  <h2>
    <span>Movie in the Park:</span>
    <span>Kung Fu Panda</span>
  </h2>
</div>
		

CSS

.image
{
  position: relative;
  width: 100%; /* for IE 6 */
}

.image h2
{
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  color: #fff;
}

.image span
{
  float: left;
  clear: left;
  color: white;
  font: bold 24px/45px Helvetica, Arial, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0); /* fallback color */
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 10px;
}