I have an image and on hover, two elements appear inside of it using visibility: visible . I need this image to have an opacity of 0.4 on hover but no the elements inside it.

<aside class="apartment"> <h2>Adipiscing elit, sed diam nonummy nibh euismod</h2> <a href="#" class="button">Read More</a> </aside> <img class="essentials" src="assets/level-3-image-7.jpeg" alt="An open travelling case with clothes, a camera and other necessities in it"> </section> .apartment { background: url("assets/level-3-image-6.jpeg"); background-position: 0 90%; background-size: cover; width: 48.5%; height: 62.015rem; position: relative; float: left; } .apartment h2 { position: absolute; text-align: center; width: 26rem; top: 28%; left: 25%; visibility: hidden; } .apartment .button { position: absolute; top: 65%; left: 37%; visibility: hidden; } .apartment:hover { filter: opacity(0.4); } .apartment:hover h2{ visibility: visible; } .apartment:hover .button{ visibility: visible; }

I know this questioned has been asked but I couldn't find one to fit my answer, my .apartment class needs to stay position:relative to position the text.

EDIT 1: **REGARDING THE MOD'S EDIT, The first answer is not working when I set:

.apartment:hover { background-color: rgba(0,0,0,0.5); }

and the second answer is regarding positioning which I specifically asked not to use.

EDIT 2: Answer was found from posting on reddit. https://jsfiddle.net/0wdL14an/