Basic CSS image swap on hover

HTML

<!-- 

http://ecommerce.shopify.com/c/ecommerce-design/t/show-a-different-image-on-product-mouseover-in-product-loop-109784

-->
<body> 
    <a class="foo" href="#">
        <img src="http://lorempixel.com/400/200/food/1/" />
        <img src="http://lorempixel.com/400/200/food/2/" />
    </a>
</body>

CSS

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}