CODEWITHSUNDEEP
htmlcss
Guillaume
Guillaume

Reputation: 547

Incompatible css changes on children on parent hover

I have the following html code :

.logo {
  display: inline-block;
  width: 30px;
  position: absolute;
  top: 50%;
  opacity: 0;
  transition: 0.6s;
}

.container:hover .logo {
  opacity: 1;
  transition: 0.6s;
}

.container:hover .picture {
  filter: brightness(0.7);
  transition: 0.6s;
}
<div class="container">
  <div class="element-header">
    <div class="element">Foo</div>
    <div class="element">Bar</div>
  </div>
  <div class="loader">&nbsp;</div>
  <img src="logo.png" alt="" class="logo">
  <img src="picture.jpg" alt="" class="picture">
</div>

When .container is hovered, I want .logo to be at opacity:1 and .picture to be at filter: brightness(0.7).

When a try to apply those properties one-by-one at .container hover, each is working. But when both are set-up, only the filter one is working.

Upvotes: 1

Views: 48

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28563

If you set the position to relative instead of absolute, both images will display. As the code stood, one image was getting lost. (I substituted my own images in and added a picture class to size the image)

The transition works fine though!

Try below: 

.logo {
  display: inline-block;
  width: 100px;
  //height:auto;
  position: relative;
  top: 50%;
  opacity: 0;
  transition: 0.6s;
}

.picture {
  width: 500px;
  height: auto;
  float: left;
}

.container:hover .logo {
  opacity: 1;
  transition: 0.6s;
}

.container:hover .picture {
  filter: brightness(0.7);
  transition: 0.6s;
}
<div class="container">
  <div class="element-header">
    <div class="element">Foo</div>
    <div class="element">Bar</div>
  </div>
  <div class="loader">&nbsp;</div>
  <img src="https://www.dcu.ie/sites/default/files/afu_logo2_1.jpg" alt="agefriendly" class="logo">
  <img src="http://www.rachelgallen.com/images/mountains.jpg" alt="Mountains" class="picture">
</div>

Fiddle here

Upvotes: 1

Related Questions