如何在滑块上添加叠加悬停？

Question

我很感激你的帮助。

我想在下面这个滑块的图像上添加图像/文字叠加。 因此，当有人徘徊在图像上时，会出现50％透明的黑色块和中间的“细节”图像/文本。

这是悬停的示例（缩放和详细信息按钮）：http://themes.derby-web-design-agency.co.uk/Lola-Html-Theme/Light/

这是我想要使用的滑块：http://codepen.io/anon/pen/Alzhn

提前致谢！

Answer 1

无需重新发明轮子。考虑以下项目：

• http://wowslider.com/jquery-slideshow-huge-demo.html

• http://bxslider.com/examples/image-slideshow-captions

对于叠加层，您还可以考虑

• http://buildinternet.com/project/mosaic/1.0/

尝试使用上述任何链接进行实施，并针对您的问题进行更具体的说明。

例如，我遇到X问题，我想做Y而我尝试使用XYZ解决这个问题。你的JS小提琴只是你现有项目的一个副本，没有任何迹象表明你试图解决你的问题。

与任何学习环境一样，我会先采取一些小步骤。在您的使用案例中，我将按如下方式解决问题：

1. 需要悬停标题
2. 需要滑块

然后，当步骤＃1完成时，您可以在此基础上构建，依此类推。