I have two images inside a div. When the user hovers over the second image, the first one's opacity should go to 40%. I problem is that I cannot select `img.first` when `img.second` is being hovered over. I have tried looking into the general sibling selector, but that seems to only select the elements that come after your initial selector.

I know this can be done with jQuery, but I'm wondering if there is a pure CSS solution?

```
<div>
  <img class="first" src="#">
  <img class="second" src="#">
</div>

div > img.second:hover ~ img.first { opacity:0.4; filter:alpha(opacity=40); } //failed

```