title: social media icons fade and swap effect with Jquery
body: <p>I've searched around and haven't found anything, which is surprising because of how common I see this effect on websites. </p>
  
  <p><strong>The problem:</strong> social logos are too colorful to display without clashing with the rest of the website's look and feel.</p>
  
  <p><strong>The solution:</strong> turn them the color of the rest of the site and when the user hovers over them, they turn their usual glorious color. (Specifically, I wanted a fade effect to do this)</p>
  
  <p>I can get this to work as a simple swap, but I really, really like the fade effect and think it's worth the extra time and code to make it right.</p>
  
  <p>Anyway, I also found a solution that works with one single image, but now my problem is when a user hovers over one image, all of the images change. I want to target them individually and I've done so using $(this) but it's still not working. </p>
  
  <p>I've tried a number of failed attempts and here's my latest:</p>
  
  <p><strong>The html:</strong></p>
  
  <pre><code>&lt;div id="social"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="http://skype.com/yourid" target="_blank"&gt;&lt;img class="up" src="images/icon_skype_blk.png" alt="social media icon"&gt;
  &lt;img class="over" src="images/icon_skype_over.png" alt="social media icon"&gt;&lt;/a&gt;&amp;nbsp;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://vimeo/.com/yourid" target="_blank"&gt;&lt;img class="up" src="images/icon_vimeo_blk.png" alt="social media icon"&gt;
  &lt;img class="over" src="images/icon_vimeo_over.png" alt="social media icon"&gt;&lt;/a&gt;&amp;nbsp;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://youtube.com/yourid" target="_blank"&gt;&lt;img class="up" src="images/icon_youtube_blk.png" alt="social media icon"&gt;
  &lt;img class="over" src="images/icon_youtube_over.png" alt="social media icon"&gt;&lt;/a&gt;&amp;nbsp;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In each list item I have an up and an over image. Note: I had to put non breaking spaces in each list item to make it recognize the absolute positioning (top:0 left:0) of the images in the CSS. Otherwise all the elements get stacked on top of one another. Yikes! </p>
  
  <p><strong>The CSS:</strong></p>
  
  <pre><code>#social ul li {
          display: inline;
          float: right;
          position: relative;
          width: 31px;
      }
  
  img.up {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 26px;
          height: 26px;
          z-index: 1;
      }
  
  img.over {
          position: absolute;
          top: 0px;
          left: 0px;
          display: none;
          width: 26px;
          height: 26px;
          z-index: 2;
      } 
  </code></pre>
  
  <p>In the CSS I have absolute positioning with the over class set to display none so the over image doesn't show when the page loads initially. I use Jquery to show it on hover.   </p>
  
  <p><strong>The JQuery:</strong></p>
  
  <pre><code>$('img.up').hover(
      function(){
          $(this).stop()
          $(this).fadeOut()
          $('img.over').fadeIn()
      },  
      function (){
          $(this).stop()
          $(this).fadeOut()
          $('img.up').fadeIn()                  
      }
  );
  </code></pre>
  
  <p>Right now, this jquery fades all images to their over (colored) state. Then stays that way even when you move out. I've been able to get it to do other things but nothing resembling what I want. (A simple fade in fade out when the user hovers over each image). </p>
  
  <p>If anyone can help it would be much appreciated. This is day 3 and I have yet to find the solution I'm looking for.</p>