Image sliding right to cover text then revealing new text as it slides back

Question

I have an effect I want to achieve, but I'm having trouble thinking of exactly how I could achieve it. Here are some images that show the progression of the effect I want to achieve: http://imgur.com/a/In6IK

So essentially, I have multiple slides containing text which I want to automatically display one by one. In order to hide the current slide and show the next one, I want an image (which sits to the left of the text) to slide to the right, covering/hiding the text as it goes, and then when it slides back to its original position, the text for the next slide is shown.

So how would I go about achieving this effect?

Answer 1

Here is a raw idea. Maybe you can make use of :after and :before and position them so that they hide the text, making it disappear.

HTML would be something like:

<div class="main">
  <div class="over"></div>
  <div class="text">This is some text</div>
</div>

And for CSS look in this fiddle http://jsfiddle.net/Zs2MU/

Maybe it will help you in your situation.

UPD Here is updated solution which supports multiline text http://jsfiddle.net/Zs2MU/2/