Increase transparent background opacity on hover?

Question

I'd like for the my background image to increase from .1 opacity to .5 opacity when a user hovers over my div.

HTML

<div id="list">
    <div class="line_one">om nom nom nom...</div>
    <div class="line_two">18 foods to make you incredibly hungry</div>
</div>

CSS

#list {
  display:block;
  position: relative; 
  -webkit-transition: all 1s ease; 
  -moz-transition: all 1s ease; 
  -o-transition: all 1s ease; 
  -ms-transition: all 1s ease; 
  transition: all 1s ease;
}

#list::after {
  content: "";
  background: url('test.jpg');
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

There must be a way to do this without Javascript. Any ideas?

Solution

Of course there is.

#list::after {
    transition: opacity 1s ease;
}
#list:hover::after {
    opacity: 0.5;
}

Comments

[user1787531]

Perfect! I didn't realize that the ::after needed to go after :hover, not before. That was the problem in my case. I'll accept this answer when SO lets me in 10 minutes.

[Night]

Don't forget to tick the tick under the voting arrows, you get points and so does he.

[Niet the Dark Absol]

@Night It's too soon - the question has to be 15 minutes old ;)