How to show an image that is hidden using jQuery
<p>I'm having issues showing an image that is hidden using jQuery. </p>

<p>I have hidden the an image with the class 'img.zoom' using jQuery. I want to be able to hover over the list item that the image is within and show the image that is hidden. I am able to do this but it affects every list item with that image in. I only want it to affect that particular list item.</p>

<p>Please help.</p>

<p>My code:</p>

<pre><code> &lt;ul class="portfolio"&gt;
  &lt;li&gt; &lt;img src="images/example.jpg" width="200" height="200" alt="Example" /&gt; &lt;img src="images/row.png" width="11" height="11" class="zoom" /&gt; &lt;/li&gt;
  &lt;li&gt;&lt;img src="images/example.jpg" width="200" height="200" alt="Example" /&gt;&lt;img src="images/row.png" width="11" height="11" class="zoom" /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/example.jpg" width="200" height="200" alt="Example" /&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="images/example.jpg" width="200" height="200" alt="Example" /&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>my js:</p>

<pre><code>// hide zoom button
$("img.zoom").hide(); 
// show zoom button on hover
$("ul li").hover(function () {
$('img.zoom').show();
});
</code></pre>

<p>Many thanks in advance.</p>

<p>Craig</p>

<p>UPDATE</p>

<p>I have managed to work this out by adjusting the code like so</p>

<pre><code>$('img.zoom', this).toggle();
</code></pre>

<p>But is there away to fadeToggle this in and out?</p>
