Hover with overlay and not affecting text color

Question

I'm trying to make the color of the image darker when it's hovered, and without affecting the color of the text attached to it at the same time. I tried to use opacity but it doesn't work as expected.

 .imageone { position: relative; width: 100%; } .imageone:hover { opacity: 0.9; } #header { position: absolute; left: 100px; top: 200px; color: white; } 

 <div class="imageone"> <img src="https://i.stack.imgur.com/IG2v9.jpg" alt="" /> <h2 id="header">A Movie in the Park:<br />Kung Fu Panda</h2> </div> 

Answer 1

Approach 1: Using CSS filter , eg filter: brightness(0.5);

 .imageone { position: relative; } .imageone img { transition: filter .25s; } .imageone img:hover { filter: brightness(0.5); } #header { position: absolute; left: 100px; top: 200px; color: white; } 

 <div class="imageone"> <img src="https://i.stack.imgur.com/IG2v9.jpg" alt="" /> <h2 id="header">A Movie in the Park:<br />Kung Fu Panda</h2> </div> 

Approach 2: Using a pseudo element to cover the image with background-color: rgba();

 .imageone { position: relative; display: inline-block; } .imageone:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: background-color .25s; } .imageone:hover:before { background-color: rgba(0,0,0,.5); } #header { position: absolute; left: 100px; top: 200px; color: white; } 

 <div class="imageone"> <img src="https://i.stack.imgur.com/IG2v9.jpg" alt="" /> <h2 id="header">A Movie in the Park:<br />Kung Fu Panda</h2> </div>