0

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/

seandaniel
  • 141
  • 4
  • 13

1 Answers1

0

You can’t really do this with just css, as altering the opacity of the parent element will of course alter the opacity of its children. You could just create a second identical image with your desired opacity and then use jquery to swap it out on hover, like so:

$(“.apartment”).hover(function(){
   $(this).css(“background”,”url(/path/to/new/image.png)”);
}, function(){
  $(this).css(“background”,”url(/path/to/old/image.png)”);
});
Claire
  • 3,146
  • 6
  • 22
  • 37