title: Making a Masked Gallery in CSS/JQuery
body: <p>I'm working on a portfolio site, it has a gallery which is fixed up to a CMS. Here's the set up all the images are to be placed one on top of the other and then the thumbnails are actually masked portions of the image, when you hover over one the image is shown in place of all the other 'masked images' <strike> - a simple fade in fade out with JQuery. The gallery is like a series of preview boxes (the masks) just around 70x70px pretty small here's an example of how it would work:</p>
  
  <p><a href="http://imgur.com/t3lJa" rel="nofollow">http://imgur.com/t3lJa</a></p>
  
  <p>That said, I'm having trouble with masking these images because since it's going to be run by a CMS so the actual locations of the masks aren't going to be the same so it'll be like a moving mask as newer images are uploaded. I've tried using the clip property in the CSS but that needs for the mask to be placed in one spot hence not an option. Any ideas I'm stuck :/</strike></p>
  
  <p>Okay so I've been working at this and found a means of doing it using a mix of jQuery and CSS. Here's my progress:</p>
  
  <p><a href="http://haiderali.heliumhost.tk/site/" rel="nofollow">http://haiderali.heliumhost.tk/site/</a></p>
  
  <p>But I've still got a problem I can't seem to get the mouseover working. Right now what you see is how the gallery would look on hover I've set up two images for a test and I've also set up the program to collect all the image src attributes into an array. Any ideas on how to get this working? Here's the code:</p>
  
  <pre><code>// Assign each link it's class by position on screen
      var i = 0;
  
      for (i = 0; i &lt;= 71; i++) {
          clipNum = i + 0;
          $('#links').find('a').eq(i).addClass('clip' + clipNum);
      }
  
  // Define all img&gt;src attributes to an array
      var SRC = new Array(71);
  
      for (i = 0; i &lt;= 71; i++) {
          clipNum = i + 0;
          SRC[i] = $('a.clip' + clipNum + ' &gt; img').attr('src');
      }
  </code></pre>
  
  <p>I've attempted the mouseover successfully by storing the image src value and then replacing all the other sources with that but I've only been able to do that as hard coding like this:</p>
  
  <pre><code>var imgSrc1 = $('a.clip1 &gt; img').attr('src');
  $('a.clip1').mouseenter( function() {
      $('a.clip1 &gt; img').attr({src: imgSrc1});
  </code></pre>
  
  <p>My problem now is that I can't get this to work in a loop counter :( I'd really like some help one how to make it work for every box on the screen I could only do this by hard coding each box separately that's 72 boxes times 2 times 72 images... that's alot!!</p>