Overlaying a div upon an image on mouseover with fadein fadeout effects

0
votes

I was creating an overlay upon an image which works when mouseover the image. I use jquery fadein effect for the overlay to appear and fadeout to dissapear. The overlay is a div cointaining a paragraph. The problem is that when i mouseover the paragraph,it is calling the fadeout event again which makes an unwanted flickering. 

<html>
<head>
  <script>
      $(document).ready(function(){
         $('.pic').mouseover(function(){
           $(this).next().fadeIn("fast");
         }); 

          $('.overlay').mouseout(function(){
           $(this).fadeOut("fast");
         });       
      });
  </script>
  <style>
    .overlay{ display:none; position:absolute; top:0; width:100%; }
  </style>
</head>
<body>
  <div class="container">
    <img src="xyz.jpg" class="pic" />
    <div class="overlay">
      <p>Hello guys</p>
    </div>
  </div>
</body>
2
jqueryoverlayfadeinfadeout
it is because when it fades out, your pointer mouseovers the picture again, – Joey Hipolito

2 Answers

0
votes

Use instead:

$('.container').hover(function () {
    $(this).find('.overlay').fadeToggle("fast");
});
0
votes

This is because fadeOut has a display:none at the end of it, so when you move your mouse after the fadeOut has completed it will trigger the unhover function. Instead, just animate the opacity.

$('.main-overlay').hover(function() {
    $(this).animate({opacity: 0}, 1000);
}, function() {
    $(this).animate({opacity: 1}, 1000);
})

See demo