Change table contents on hover?

Change table contents on hover?

I have a table like this:
<div class="footer_row_3">
<table class="tableA">
<tr>
<td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
<td><span class="statement">Lorem Ipsum</span></td>
<td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
</tr>
</table>
</div>
What I want to do is that when the mouse hovers over tableA at any
location within tableA, the following two changes happen:
1) Popcorn images change to this image: http://i.imgur.com/K29T3Fw.png 2)
The text color changes to red.
Also, it should have with a CSS 'fade' style transition, so that the
contents fades into the updated style contents.
Also, BOTH changes mentioned above should happen when I hover tableA from
any place within tableA.
I know how to individually change text and image on hover, but I don't
know how to do it together for multiple items.
How can I achieve this effect ?