圖像向右滑動以覆蓋文本，然后向后滑動以顯示新文本

Question

我有一個想要達到的效果，但是我很難思考如何實現它。 以下是一些圖像，這些圖像顯示了我想要達到的效果的進度： http : //imgur.com/a/In6IK

因此，從本質上講，我有多張幻燈片，其中包含要自動顯示的文本。 為了隱藏當前幻燈片並顯示下一張幻燈片，我希望圖像（位於文本左側）向右滑動，以覆蓋/隱藏文本，然后將其滑動回其位置時原始位置，則顯示下一張幻燈片的文本。

那么我將如何實現這種效果呢？

Answer 1

這是一個原始想法。 也許您可以使用:after和:before並放置它們的位置，以便它們隱藏文本，使其消失。

HTML類似於：

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

對於CSS，請看這個小提琴http://jsfiddle.net/Zs2MU/

也許它將對您的情況有所幫助。

UPD這是更新的解決方案，支持多行文本http://jsfiddle.net/Zs2MU/2/