How to add a black shadow on top of a div block with background image?

Question

I am now creating a website quite similar to this demo website which displays some image on a page and some effects will be shown when hovering on a particular image. https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio2&stacked=h

In this demo website, when we hover on the image, the opacity of the image will be changed from 0.5 to 1. However, in my website, all the images on the page will be covered by a black layer with opacity is 0.5. When hover mouse on a particular image, the black layer on that image will be disappeared. How can I create this kind of effect? Thank you very much!

In my code, I have something like this:

<div class="img-container">
<div style="float:left; background-image:url('img/a.jpg'); width: 100px;height: 100px;"></div>
<div style="float:left; background-image:url('img/b.jpg'); width: 100px;height: 100px;"></div>
</div>

I would like to add a black layer with 0.5 opacity on the images? How can I do that?

Answer 1

 <style> .image{ background-image:url(https://www.w3schools.com/w3images/natureboy.jpg); background-size:cover; width:200px; height:200px; cursor:pointer; } .blackLayer{ width:100%; height:100%; background-color:#000; opacity:0.5; } .blackLayer:hover{ opacity:0; } </style> <div class="image"> <div class="blackLayer"></div> </div>