Filtro semi-transparente numa imagem

No mousehover um filtro semitransparente aparece sobre a imagem

by NunoMira

HTML

<a href="#" class="wrapper">
    <span class="text">
        Read More!
    </span>
    <img src="http://www.1stwebdesigner.com/wp-content/uploads/2009/11/webdesign-books-wishlist/css-missing-manual-books-web-development-books.jpg">
</a>

CSS

.wrapper {
    position: relative;
    padding: 0;
    width:100px;
    display:block;
}
.text {
    position: absolute;
    top: 0;
    color:#f00;
    background-color:rgba(255,255,255,0.7);
    width: 300px;
    height: 391px;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.text:hover {
    opacity:1;
}

img {
    z-index:1;
}
span.text
{
  width: 300px;
  height: 391px;
  color: #000;
  text-align: center;
  line-height: 391px; /* Magic Trick to align text " vertically " */
}