Change child opacity

by Chris

HTML

<div id="d1">
  <div id="d2">

  </div>
</div>

CSS

#d1 {
  height: 200px;
  width: 200px;
  background-color: blue;
}

#d2 {
  height: 100px;
  width: 100px;
  background-color: green;
  border-right: solid orange 10px;
  opacity: .5;
  transition: opacity 2s;
}

#d1:hover > #d2 {
  background-color: red;
  opacity: .95;
}