Transparencia na imagem

Bom estou tentando fazer com que assim que o mouse passe por cima da imagem, uma cor meio avermelhada apareça só que meio transparente, ainda dando pra ver a verdadeira imagem por tras dessa camada vermelha.. só que não consigo trazer a cor pra cima da imagem, ela só fica atras

<div class="transp">
 <a href="#"><img src="images/image_1.jpg" width="250" height="160"/></a>
 <p>Projeto 1</p>
</div>

.transp{margin:20px 20px 50px 20px; float:left; width:265px; height:175px; border:1px solid #CECECE; background:#FFF;}
.transp img{padding:8px 8px;}
.transp p{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; text-align:center; margin-top:5px;}
.transp a:hover{background:#F00;}

Primeiro só estou tentando colocar o hover pra depois a transparencia, só que como eu disse, só fica por tras da imagem e não por cima dela.