Изменить z-индекс div с эффектом исчезновения при наведении мыши

Question

У меня есть 4 изображения, сложенных друг на друга, см. Ниже:

Я пытаюсь достичь двух вещей:

1. Когда мышь находится над фоновым изображением, это изображение должно выйти на передний план с эффектом затухания. Есть также различный текст под каждым изображением, этот текст должен прийти к на переднем плане. (затухания там не нужны)

   Результат должен быть таким:

2. Каждые 10-15 секунд (без ввода пользователя) следующее изображение справа должно исчезать автоматически.

Технически, я думал о том, чтобы поместить каждое изображение и текст в отдельный div и поиграть с z-порядком. Эффект затухания может быть достигнут с помощью jquery, но я, к сожалению, раньше этим не пользовался.

Любой пример кода, конкретная помощь или указатели приветствуются.

Спасибо!

Answer 1

Хотя невозможно управлять затуханием элемента через его z-index , мы всегда можем обмануть то, что видят наши глаза.

DEMO GALLERY

Для этого мы можем сделать:

• Вставить в нашу галерею элемент DIV который захватит атрибут src текущего изображения и установит его в качестве фонового изображения
• скрыть текущее изображение, расположив DIV на этом изображении .position ()
• затухание нашего DIV входа / выхода
• сброс видимости изображения

Дайте мне знать, если у вас есть какие-то проблемы, я могу прокомментировать мой код, чтобы сделатьшаги, которые я использовал.

Счастливое кодирование

Answer 2

Посмотрите на этот плагин.Просто изучите его, в нем есть сотни различных эффектов, которые вы можете использовать в вашем случае.

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