title: How to postion two centered DIVs overlapping each other and be responsive?
body: <p>I am trying to position two DIVs over each other so that when the pointer hovers over the picture the top one fades to show the one underneath. I did this here: <a href="http://quaystreet.chrisloughnane.net/" rel="nofollow">http://quaystreet.chrisloughnane.net/</a></p>
  
  <p>I want make it responsive so the pictures would scale to the horizontal width of the mobile device. Which is no problem with one picture but as soon as I try to re-position the underneath DIV it breaks.</p>
  
  <p><a href="http://jsfiddle.net/chrisloughnane/f2NdQ/4/" rel="nofollow">http://jsfiddle.net/chrisloughnane/f2NdQ/4/</a></p>
  
  <p>Is it possible with just CSS to do what I want?</p>
  
  <pre><code>&lt;div id='old'&gt;&lt;img src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg"/&gt;&lt;/div&gt;
  &lt;div id='new'&gt;&lt;img src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg"/&gt;&lt;/div&gt;
  
  img {
      max-width: 100%;
      display: block;
      margin: auto;
  }
  </code></pre>