title: fadeIn not working on nth-child(2)
body: <p>Could someone have a look at my code. what it's suppose to do is animate the img tags using fadeIn and fadeOut but it only fades out the first img and doesn't fade in the second img. I think my css could be wrong and that's why the second image isn't showing Im not getting any errors</p>
  
  <p>its an image on top of another image</p>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function() {
      $('.social-media a').on('mouseenter', function(e) {
          $(this).find("img:nth-child(2)").fadeIn();
          $(this).find("img:nth-child(1)").fadeOut()
      });
  })
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="social-media"&gt;
      &lt;a title="Share On Twitter" href="#"&gt;
           &lt;img alt="" src="images/icon_twitter.png" /&gt;
           &lt;img class="test" alt="" src="images/icon_twitter_active.png" /&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.social-media {
      padding-top: 20px; 
      width: 166px; 
      margin: 0 auto 10px auto;
  }
  .social-media a {
      position: relative;
      width: 55px;
      height: 51px;
  }
  .social-media a img:nth-child(1) {
      opacity: 1;
  }
  .social-media a img:nth-child(2) {
      position: absolute;
      left: 0; top: -33px;
      opacity: 0;
      z-index: 2; 
  }
  </code></pre>