0

I want to change the child div image opacity when the parent div is hovered. How to do this in CSS?

<div class="parent">
    <div class="child">
        <img src="" alt="" height="" width="">
    </div>
</div>
Kenshinh
  • 173
  • 1
  • 1
  • 14
  • 2
    Don't tell me that you found absolutely nothing when doing a search? https://www.google.com/search?ei=dcBNW9e2OZCKapzmr-gE&q=change+opacity+of+element+css&oq=change+opacity+of+element+css&gs_l=psy-ab.3..0i30k1.11607.12210.0.12578.8.6.0.0.0.0.278.657.0j1j2.3.0....0...1.1.64.psy-ab..7.1.278....0.y2MQJmAzjnM – Temani Afif Jul 17 '18 at 10:11
  • @TemaniAfif how can the accepted answer that has no snippet, no explanation, and is for this level of question difficulty get 75points is beyond me. Plus it doesn't even answer the question exactly. `change the child div image opacity when the parent div is hovered` which should translate in `.parent:hover .child img { opacity: 0.7 } ` – Mihai T Jul 17 '18 at 15:00
  • @MihaiT good luck finding the upvoters that are encouraging such trivial and obvious question to be asked again and again and again ;) – Temani Afif Jul 17 '18 at 15:04

3 Answers3

7

Use :hover-selector and change the img opacity:

.child:hover img {
    opacity: 0.8;
}

Or if you want to change opacity of the while child div then:

.parent:hover .child {
    opacity: 0.8;
}
Esko
  • 4,109
  • 2
  • 22
  • 37
0

Sample Fiddle Link - JsFiddle

.parent {
  width: 300px;
  height: 300px;
  background: red
}
.child {
  width: 100px;
  height: 100px;
  background: green
}
.parent:hover .child {
  opacity: .5
}
Karuppiah RK
  • 3,894
  • 9
  • 40
  • 80
0

You can do something like this:

.parent {
    background: red;
    padding: 30px;
}

.parent:hover .child {
   opacity: 0.3
}

.child {
    background: blue;
    padding: 30px;
}
<div class="parent">
    <div class="child">
        <img src="" alt="" height="" width="">
    </div>
</div>
Adeel
  • 2,901
  • 7
  • 24
  • 34