Не вешается hover background rgba на картинку

.head_block 
{ 
    position: relative; 
    display: inline-block; 
} 
 
.head_block img, .overlay  
{ 
    width: 360px; 
    height: 240px; 
} 
 
.overlay 
{  
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 0, 0); 
} 
 
.overlay:hover  
{  
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background-color: rgba(0, 0, 234, .5); 
}

<div class="head_block"> 
    <span class="overlay"></span> 
    <img src="http://s5.pikabu.ru/post_img/big/2015/08/20/7/1440069505_326762601.png"" alt="" /> 
</div>

img:hover { 
	background: rgba(39,156,232, 0.5); 
	cursor: pointer; 
    opacity: 0.3; 
}

<div class="head_block"><img src="http://lorempixel.com/output/city-q-c-360-260-1.jpg" alt="" width="360" height="260"></div>