Just a small change to the previous demo to have a continuous supply of rolling cans.

This would also work in Safari and Chrome if only they would fix the bug that stops :hover being used in conjunction with the general sibling selector as in this style .frame b.p1:hover ~ div {left:10px;} for example.

Remember this is only for fun and the original idea for the overlay is all due to Román Cortés.

7th February 2010

Now Safari and Chrome users can also see this working. Just place the mouse over the second image. No need to keep the mouse moving in these browsers.

28th May 2024

CSS has come a long way since this demo was first posted. But it is still interesting to see how it was produced back in 2010. It now works in all browsers, and with a little extra CSS it can now be made responsive and work on page entry without the need to hover the image.