title: absolute positioned div images overlapping
body: <p>I am trying to put together a social-media bar for a website and am using images as the links to each. I have an animation set for each image and for the animation to work properly, the <code>img</code> position needs to be set to <code>absolute</code>. The problem I am running into with this however is all the images stack on top of each other within the <code>div="crossfade</code>. I have been working on this for 3 hours now and have no logical solution. How can I separate the individual links.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="social-icons"&gt;
      &lt;div id="crossfade"&gt;
           &lt;a href="http://www.facebook.com/lostbydesignband" target="_blank"&gt;
                      &lt;img src="images/facebookLogoHover.png" width="55" height="55" class="bottom" &gt;
                      &lt;img src="images/facebookLogo.png" width="55" height="55" class="top" &gt;
           &lt;/a&gt;
           &lt;a href="#" target="_blank"&gt;
                      &lt;img src="images/gmailLogoHover.png" width="55" height="55" class="bottom" &gt;
                      &lt;img src="images/gmailLogo.png" width="55" height="55" class="top" &gt;
           &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#social-icons {
      background-color:#291F32;
      width:100%;
      position:fixed;
      bottom:0;
      margin:0px;
  }
  
  #crossfade {
      position:relative;
  }
  
  #crossfade img {
      position:absolute;
      margin:0px auto;
      left:0;
      right:0;
      -webkit-transition: opacity .3s ease-in-out;
      -moz-transition: opacity .3s ease-in-out;
      -o-transition: opacity .3s ease-in-out;
      transition: opacity .3s ease-in-out;
  }
  
  #crossfade img:hover {
      opacity:0;
  }
  </code></pre>