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

Question

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 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!

Answer 1

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