How to apply jquery effect to only one element at a time, not the whole list?
<p>I've a CMS which generates a list like following :</p>

<pre><code>&lt;div class="span-feed"&gt;
&lt;div class="project-thumb"&gt;&lt;img src="..." /&gt;&lt;/div&gt;
&lt;div class="info-overlay"&gt;&lt;h1&gt;Something&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;&lt;!--.span-feed--&gt;
</code></pre>

<p>I wish to hide info-overlay class and make visible only when user hovers on the thumbnail. Its pretty easy to make it happen for a single thumbnail but when there are multiple items in the generated list, the hover effects gets triggered on all the thumbnails, which is logically correct, but I dont want that to happen.
I'm a jQuery noob, kindly suggest me how can I limit the effects to a single thumbnail at a time.
I only want the effect to get triggered on the thumbnail user hovers on.</p>

<p>EDIT: The CMS is generating a ul list as follows:</p>

<pre><code>&lt;ul&gt;
&lt;li&gt;&lt;div class="span-feed"&gt;
&lt;div class="project-thumb"&gt;&lt;img src="..." /&gt;&lt;/div&gt;
&lt;div class="info-overlay"&gt;&lt;h1&gt;Something&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;&lt;!--.span-feed--&gt;&lt;/li&gt;

&lt;li&gt;&lt;div class="span-feed"&gt;
&lt;div class="project-thumb"&gt;&lt;img src="..." /&gt;&lt;/div&gt;
&lt;div class="info-overlay"&gt;&lt;h1&gt;Something&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;&lt;!--.span-feed--&gt;&lt;/li&gt;

&lt;li&gt;&lt;div class="span-feed"&gt;
&lt;div class="project-thumb"&gt;&lt;img src="..." /&gt;&lt;/div&gt;
&lt;div class="info-overlay"&gt;&lt;h1&gt;Something&lt;/h1&gt;&lt;/div&gt;
&lt;/div&gt;&lt;!--.span-feed--&gt;&lt;/li&gt;

&lt;/ul&gt;
</code></pre>

<p>jQuery is as follows:</p>

<pre><code>$('.project-thumb').mouseover(function(){
    $('.info-overlay').fadeIn("slow");
});

$('.project-thumb').mouseout(function(){
    $('.info-overlay').fadeOut();
});
</code></pre>

<p>Thanks for your time.</p>

<p>EDIT: Thank you @NimChimpsky &amp; @Simon, I've got it working :)</p>
