title: auto zoom in n out CSS (apple-like slideshow effect)
body: <p>I like pretty much the slow auto zoom in and out effect on that site : <a href="http://watchingtheworldcup.com/" rel="nofollow">http://watchingtheworldcup.com/</a> for banner images such as the very top one. 
  I tired to replicate it, by looking at developer tools wihtin browser, but have some trouble implementing it as in developper tool some mentions are stroked etc. </p>
  
  <p>here is my html : </p>
  
  <pre><code> &lt;div class="row"&gt;  
       &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
           &lt;a href="#"&gt;
               &lt;article class="article_container"&gt;
                   &lt;img class="article_image_hompage5" src="#"&gt;       
                   &lt;h2 class="article_title_hompage3"&gt; a favourite thai soup&lt;/h2&gt;     
               &lt;/article&gt;
           &lt;/a&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>and my css for the image :</p>
  
  <pre><code>.article_image_hompage5{
      width: 100%;
      border-radius: 2px 2px 2px 2px;
      position:relative;
      display:block;
      margin-left:auto;
      margin-right:auto;
      margin-top:15px;
      z-index:0;
  }
  </code></pre>
  
  <p>Can someone help with with finding the right css settings ? 
  cheers, </p>