Change z-index of div with fade effect on mouse over

I have 4 images stacked on top of each other, see below:

I'm trying to achieve two things:

1. When the mouse is over an image that is in the background, that image should come to the foreground with a fading effect. There is also different text below each image, that text should come to the foreground. (no fading needed there)

   The result should 开发者_StackOverflow中文版be like this:

   

2. Every 10-15 seconds (without user input), the next image on the right should fade in automatically.

Technically, I thought about putting each image and text into a separate div, and playing with the z-order. The fading effect could maybe be achieved using jquery, but I've not used that before, unfortunately.

Any example code, specific help or pointers is greatly appreciated.

Thanks!

Although it's impossible to control the fade of an element through his z-index we can always trick what our eyes see.

DEMO GALLERY

To achieve that we can do:

• Insert into our gallery a DIV element that will grab the src attribute of the current image and set it as his background image
• hide the current image, position the DIV on this image .position()
• fade our DIV in/out
• reset image visibility

Let me know if you have some issues, I can comment my code to make clearer the steps I used.

Happy coding

Take a look at this plugin. Just explore it, this has got 100s of different effects which you might like to use in your case.

http://jquery.malsup.com/cycle/browser.html