title: Slider with zoom and movement effect
body: <p>I’m trying to build a css only Slider with zoom effect.</p>
  
  <p>The thing I’m not able to do is to difference the zoom from one slide to the other. For example I would like the first slide to have the current zoom effect but going slowly from right to left, the second from left to right and the third from top to bottom.
  Any help?</p>
  
  <p><a href="https://jsfiddle.net/53gpxtk1/" rel="nofollow noreferrer">Here</a> is the Jsfiddle</p>
  
  <pre><code>&lt;div class="pic-wrapper"&gt;
  &lt;figure class="pic-1"&gt;&lt;/figure&gt;
  &lt;figure class="pic-2"&gt;&lt;/figure&gt;
  &lt;figure class="pic-3"&gt;&lt;/figure&gt;
  &lt;figure class="pic-4"&gt;&lt;/figure&gt;
  &lt;/div&gt;
  </code></pre>