0

I'm trying to create an overlay on a image that slides in and out when hovering over the image. Same reason as this question - JQuery Text slideDown / slideUp Overlay on Image Keeps Bouncing?.

I have placed my code in jsFiddle so it is accesible - http://jsfiddle.net/jamescallaghan/hg9r7/

Any help would be much appreciated.

Community
  • 1
  • 1
James Callaghan
  • 35
  • 2
  • 7

2 Answers2

1

I think the issue you were having was that the hover was based off the image element and not the .slide so when that text panel slid upwards it covered the image and when you moved the mouse it acted as a hover/unhover.

Please take a look at this, i just updated your code a bit. should work with multiple slides :) Hope this helps!

http://jsfiddle.net/NuWna/2/

All the best, Anthony

Anthony Mineo
  • 41
  • 2
  • Thanks everyone. I added another div around everything so that I could call the hover from this as the top div was being used as a shadow container. – James Callaghan Jul 06 '11 at 15:47
0

You should probably use mouseenter og mouseleave for each function.

the only issue is that if the mouse is over the new div you slide up, it will slide down. so you need to fix that.

this is a partial fix:

http://jsfiddle.net/hg9r7/3/

edit: actually that is what you code already did, so no real improvement. the issue with your code, is that your mouse cursor sometimes goes over the box you are pulling up and that means you are leaving .slide img

Holger
  • 2,243
  • 17
  • 19
  • Thanks for your help but surely that is doing the same as before just using a different method. The problem is the mouse over the new element. – James Callaghan Jul 06 '11 at 14:04
  • yeah that is what i found out... I have looked at hoverIntent: http://cherne.net/brian/resources/jquery.hoverIntent.html for solving a similar problem or you could perhaps create an element that is above both the image and the div and use that to call hover on – Holger Jul 06 '11 at 14:18