Fade out Div then add display none with fade in delay

Fade out Div then add display none with fade in delay

Hi all - I'm having a small issue which i need help with.

I have a div which has been overlayed over a set of gallery images called ".mask1". When someone hovers over this div i need it to fade out and display none added so i can use the gallery. When the mouse is moved off the gallery i need the div to fade back in after say 2 seconds.

i've tried animating opacity with css but obviously the div is still their over the top so the gallery isn't clickable, i've also tried adding a class but the animation is just repeat over again making the div flicker like a strobe.

If anyone could help me i would really appreciate it.

Many thanks