How to impose a transparent background when hover? Here is the code where there is just a background overlay:

https://jsfiddle.net/38yg95t3/

but when I want to do the same but with hover (ie, darken the picture) and add the code

.img-overlay:hover{ z-index:1; width: 100%; height: 100%; background: rgba(76, 68, 68, 0.3); } ничего не срабатывает,как это исправить?
  • The @ v-rotenberh option is appropriate :) But, maybe if you just need to darken it, you can do it either with -webkit-filter: grayscale (0 .. 1); or if the background behind is dark in itself - -webkit-filter: opacity (0 ..1); I just do not like to produce z-entities, so I work with what is available. So it turns out that you can do without overlay. - Crystal

1 answer 1

 .img{ background: url(http://images.vfl.ru/ii/1461929051/aa69e902/12489881.png) no-repeat; width: 550px; height: 550px; } .img:hover .img-overlay{ width: 100%; height: 100%; background: rgba(76, 68, 68, 0.3); }

Here is the result like? http://jsbin.com/noyomogiro/edit?html,css,output