make div appear on only 1 of many image rollovers
<p>I have a hidden div with class <code>hidden_thing</code> that is positioned in the center of an image and then hidden using CSS visibility. I can switch it to visible with the following jQuery, but I have many images on the page with the same class <code>cat_image_table</code>. So how do I select on the currently rolled over image?</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){  
    $('.cat_image_table').on("mouseenter", function(){
        $('.hidden_thing').fadeIn(300)
    });

    $('.cat_image_table').on("mouseleave", function(){
        $('.hidden_thing').fadeOut('slow')
    });
});
&lt;/script&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.cat_image_table {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width:255px;
    margin:0;
    padding:0;
    border-spacing:0;
    border:none;
    height:300px;
    overflow:hidden;
}

.hidden_thing {
   position: absolute;
   top: 130px;
   left: 50px;
   width:150px;
   height:30px;
   background: #EE1B2C;
   padding-top:5px;
   color:white;
   font-family:allerBold;
   font-size:20px;
   visibility:hidden;
}
</code></pre>

<p>PHP:</p>

<pre><code>&lt;div class="cat_image_table"&gt;

    &lt;a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&amp;' : '') . 'products_id=' . $listing['products_id']) . '"&gt;' . tep_image(DIR_WS_IMAGES_CAT . $listing['products_image'], $listing['products_name'], 255, 340, 'class="cat_image_round"') . '&lt;/a&gt;

&lt;/div&gt;

&lt;div class="hidden_thing"&gt;Click to View&lt;/div&gt;

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