Hover de Imagem igual ao do Globo.com com CSS

Olá, não estou conseguindo fazer o hover da imagem como no globo.com eu coloquei abaixo como está o meu css,abraços.

#main #main_left #second_square #second_square_center #top_second_square_center .box_featured_category .content_box_featured_category .photo_category{

width:130px;
float:left;
margin:4px auto;
text-align:center;

}

#main #main_left #second_square #second_square_center #top_second_square_center .box_featured_category .content_box_featured_category .photo_category img:Hover{

border:2px solid #b71f1e;
margin:-2px auto;
z-index:2;
text-align:center;
}

#main #main_left #second_square #second_square_center #top_second_square_center .box_featured_category .content_box_featured_category .photo_category a:Hover{
_border:2px solid #2C7385;
E este o link da imagem

<div class="photo_category">

 <a href="news_detail.php?news_id={$MID->news_id}"><img src="picture/news/md_featured/small/{$MID->photo_news}" border="0" title="{$MID->title}"/></a>

Se puderem me ajudar fico agradecido, abraços.