Div Displays on Image Hover, But Blinks When I Hover Over It

Question

I have a section of this site where when I hover over an image ( class="background" ) a div fades in (div class="portfolio-hover" ). This works properly.

Now, when the div fades in and I hover over the div itself, it blinks once. I can't figure out what's going on.

You can find it here in this JS fiddle: http://jsfiddle.net/y3ec7sua/1/ . Here, in the 'Portfolio' section, hover over a green box (the image). A blue bar on the bottom shows up. Now when I hover over the blue bar, it blinks. I already added .stop() to the fadeOut , but it still blinks. How can I get it to remain static and not blink when it's displayed and hovered over?

Also, any ideas how I can get only the box being hovered over to show the div, instead of all divs showing at once?

HTML Section of images and div hover

<div id="portfolio" class="container-fluid">
            <h1>Portfolio</h1>
            <div class="row" >
                <div class="col-sm-4" id="portfolio1">
                    <div class="portfolio_custom">
                        <img src="safe.png" class="img-responsive background"> <!-- Background Image -->
                        <div class="portfolio-hover"> <!-- Hover Content -->
                            <img src="yellow_circle.png" class="img-responsive overlay">
                            <div class="text-hover">
                                <p>HTML5/CSS3</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4" id="portfolio2">
                    <div class="portfolio_custom">
                        <img src="cake.png" class="img-responsive background"> <!-- Background Image -->
                        <div class="portfolio-hover"> <!-- Hover Content -->
                            <img src="yellow_circle.png" class="img-responsive overlay">
                            <div class="text-hover">
                                <p>HTML5/CSS3/JavaScript/jQuery</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4" id="portfolio3">
                    <div class="portfolio_custom">
                        <img src="safe.png" class="img-responsive background"> <!-- Background Image -->
                        <div class="portfolio-hover"> <!-- Hover Content -->
                            <img src="yellow_circle.png" class="img-responsive overlay">
                            <div class="text-hover">
                                <p>HTML5/CSS3/JavaScript/jQuery</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

jQuery

$(function() {
    $('.background').hover(function(){
        $('.portfolio-hover').fadeIn(100);
    }, 
    function(){
        $('.portfolio-hover').stop().fadeOut();
    });

});

Answer 1

It's because your <img src="cake.png" class="img-responsive background"> and <div class="portfolio-hover"> are in the same position (both are child of <div class="portfolio_custom"> and relative).

So when you hover over .background , it does fadeIn , but in the instant you hover over the .background and if you move your mouse a little bit and it hover over .portfolio-hover it won't hover over the .background so it does the fadeOut , but if in the instant you move your mouse a little bit again, it will again hover over .background so it fadeIn again.

What you need to do is trigger the hover function on the parent which is .portfolio_custom , so it would still in the hover for the current item. Change your code to this:

$('.portfolio_custom').hover(function(){

Then with only that, you will trigger fadeIn and fadeOut to all of the .portfolio-hover , so you need to change the inside of hover to

$('.portfolio_custom').hover(function(){
    $(this).find('.portfolio-hover').fadeIn(100);
}, 
function(){
    $(this).find('.portfolio-hover').stop().fadeOut();
});

So it would only trigger the fadeIn to the .portfolio-hover of the hovered item

Here's the updated JSFiddle