Hover over li item and do something to child img

Question

Is there an easy way to do this with css?

I have a list like so..

<ul>
   <li><img src="..."><li>
<ul>

Now the default css for this is..

ul li img{
   opacity: 0;
}

how can I set the opacity: 1; if you hover over the list item??

Answer 1

It should be as simple as this:

ul li img {
  opacity: 0;
}

ul li:hover img {
  opacity: 1;
}