what am I doing wrong? It does not work and that's it: (you need to hover so that the color is superimposed on the picture. I probably do not know the trick :)

img:hover { background: rgba(39,156,232, 0.5); cursor: pointer; } 
 <div class="head_block"><img src="http://lorempixel.com/output/city-qc-360-260-1.jpg" alt="" width="360" height="260"></div>

  • Everything works in chrome - Arcadiy
  • @Arcadiy is very strange, it also worked for me here, but on my index.html this does not work = \, look, I hung the picture, hover stopped working - Alexander
  • either i try img to insert it into the sss and there it’s already tricky - Alexander

2 answers 2

 .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>

  • super, I will try - Alexander

You can do this

 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-qc-360-260-1.jpg" alt="" width="360" height="260"></div>

  • I do not think that the solution is right. You change the transparency of the picture itself, which is true (there may be other elements under the picture, for example), although the author indicated that the color should overlap. It is important that if you execute such a code, regardless of the color set, the result will not change. - Aquinary