Mousenter on only individual div

Question

I have 3 divs with the same class which means when I hover over one it activates all of them. I had a look and it said if you use $(this).find() it will fix that problem. However my code doesn't work when i do this and I wondered if anyone could tell me what I was doing wrong? And how to make it so that it only activates one div at a time.

<div class="indvWorkwrap col-lg-4">
    <div class="work">
        <div class="front"><img src="images/work1.png"></div>
        <div class="back"><img src="images/work1_hover.png"></div>
        <div class="details">
            <header>
                <h1>MAGAZINE STARTUP for THE SAUCE</h1>
                <p>Branding, web & magazine layout</p>
            </header>
        </div>
    </div>
</div>

<div class="col-lg-4">
    <div class="work">
        <div class="front"><img src="images/work1.png"></div>
        <div class="back"><img src="images/work1_hover.png"></div>
        <div class="details">
            <header>
                <h1>MAGAZINE STARTUP for THE SAUCE</h1>
                <p>Branding, web & magazine layout</p>
            </header>
        </div>
    </div>
</div>

<div class="col-lg-4">
    <div class="work">
        <div class="front"><img src="images/work1.png"></div>
        <div class="back"><img src="images/work1_hover.png"></div>
        <div class="details">
            <header>
                <h1>MAGAZINE STARTUP for THE SAUCE</h1>
                <p>Branding, web & magazine layout</p>
            </header>
        </div>
    </div>
</div>

Jquery Code :

$('.front').mouseenter(function () {
    $(this).find('.details header').delay(100).animate({
        bottom: '-100px'
    });
    $(this).find('.back').delay(400).fadeIn(200);
});

$('.back').mouseleave(function () {
    $(this).delay(100).fadeOut(200);
    $(this).find('.details header').delay(400).animate({
        bottom: 0
    });
});

Answer 1

You need siblings() and next() instead of find. As find searches in descendants and you need to search the siblings.

$('.front').mouseenter(function () {
    $(this).siblings ('.details').find('header').delay(100).animate({
        bottom: '-100px'
    });
    $(this).next('.back').delay(400).fadeIn(200);
});