There are a few things wrong here.
1: Display: hide is invaild
You mean to have display: none
2: Positioning.
In order for elements to overlap each other, they need to be out of the flow. Use positioning to do this. I would recommend a relative container with absolute inner elements.
3: Fading
Your jQuery is simply hiding and showing the elements, which has no transition to it. If you want them to fade in and out, you can use the jQuery functions .fadeOut()
and .fadeIn()
or create custom animations with .animate()
:
$(function(){
$(".layer3").hover(function(){
$(this).fadeOut(500);
$(".layer4, .layer5").fadeIn(500);
});
});
Here's a very crude example.