title: position absolute element visible inside overflow:hidden element
body: <p>I need to have elements positioned absolute inside a div with overflow hidden, however these elements with position absolute are visible outside the boundaries of the div with overflow hidden, I would need them not to be visible at all.
  See code: <a href="http://jsfiddle.net/xEYJc/" rel="nofollow">http://jsfiddle.net/xEYJc/</a></p>
  
  <p>The idea is:</p>
  
  <ul>
  <li><p>when you hover on one 'li' it will slide in (inside an iPhone frame) the respective picture</p></li>
  <li><p>this the CSS for each image</p>
  
  <pre><code>    .first .search{
          position: absolute;
          width: 229px;
          margin: 94px 60px 40px -280px;
          -webkit-transition:margin-left 0.3s ease-out;
          -webkit-transition-delay:0.2s;
      }
  </code></pre></li>
  <li><p>and this is the CSS for the container:</p>
  
  <pre><code>    .iPhoneWrapper div{
          overflow-x: hidden;
          margin-left: 17px;
      }
  </code></pre></li>
  </ul>
  
  <p>As it stands the '.search' positioned absolute is visible  outside the 'div' with overflow hidden and I need them to be hidden and only visible when sliding in.</p>