Jquery select single item for fadeIn

Question

Learning jquery.

Currently I have this bit of code:

$(document).ready(function() {

    $('.portfolio img').mouseover(function() {
        console.log('hover succes');
        $('.thumbnail-overlay').fadeIn();
    }).mouseout(function() {
        $('.thumbnail-overlay').fadeOut();
    })

});

Obviously not ideal since I have a .portfolio section with images but the effect is applied to all images at once. How do I only get the currently hovered item selected for the effect?

Answer 1

To be able to do this make sure the single img element and .thumbnail-overlay both have a common parent element.

Like this (where the parent is .portfolio):

<div class="portfolio">
    <div class="thumbnail-overlay"></div>
    <img>
</div>

Now you can access the .thumbnail-overlay using $(this).closest('.portfolio').find('.thumbnail-overlay')

OR make sure the img element is a child of .thumbnail-overlay.

Like this:

<div class="portfolio">
    <div class="thumbnail-overlay">
        <img>
    </div>
</div>

Or this:

<div class="thumbnail-overlay">
    <div class="portfolio">
        <img>
    </div>
</div>

And then get the .thumbnail-overlay using $(this).closest('.thumbnail-overlay').