title: jQuery image zoom foreground
body: <p>I have a  tag with a bunch of image thumbnails, which are each placed in their own  tag.</p>
  
  <pre><code>&lt;div class='imageframe'&gt;
      &lt;div class='imagecontainer'&gt;
          &lt;img class='clipartimage' src='myimageurl&gt;
      &lt;/div&gt;
      &lt;div class='imagecontainer'&gt;
          &lt;img class='clipartimage' src='myimageurl2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JQuery code so far:</p>
  
  <pre><code>$(".imagecontainer").click(function (event) {
      $(event.target).width(100);
      $(event.target).height(100);
  });
  </code></pre>
  
  <p>What i would like to do, is show a larger version of the image, when the user clicks or hovers over the image. 
  What i have so far, is i am able to double width and height of an image when it is clicked, but this just makes the image "spill over" into it's neighbouring pictures, and lie partially behind these. This is made worse by the fact that the pictures backgrounds are transparent.</p>
  
  <p>What i need, is to have the picture move to the foreground when it is clicked(or hovered), and remove the transparency of it's background.</p>
  
  <p>Unless it is a really big job to do something like this, i would prefer to write my own code for it.</p>
  
  <p>Thanks</p>