在鼠标悬停时更改div的z-index和淡入淡出效果

Question

我有4张图像叠在一起，见下图：

我正在努力实现两件事：

1. 当鼠标悬停在背景中的图像上时，即 图像应该以褪色效果出现在前景中。有 每个图像下面也有不同的文字，那个文字应该来了 前景。 （那里不需要褪色）

   结果应该是这样的：

2. 每隔10-15秒（无用户输入），右侧的下一张图像应淡入 自动

从技术上讲，我考虑过将每个图像和文本放入一个单独的div中，并使用z顺序进行播放。使用jquery可以实现褪色效果，但遗憾的是我之前没有使用过它。

非常感谢任何示例代码，特定帮助或指针。

谢谢！

Answer 1

虽然通过他的 z-index 来控制元素的淡化是不可能的 我们总能欺骗我们的眼睛。

DEMO GALLERY

要实现这一点，我们可以做到：

• 在我们的图库中插入一个DIV元素，它将获取当前图片的src属性并将其设置为他的背景图片
• 隐藏当前图像，将DIV放在此图像上.position（）
• 淡入/淡出我们的DIV
• 重置图片可见性

如果您有任何问题，请告诉我，我可以评论我的代码，以便更清楚地了解我使用的步骤。

快乐编码

Answer 2

看看这个插件。只是探索它，它有100种不同的效果，你可能想在你的情况下使用。

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