Html 滑动字幕不起作用

我在我的一个页面上使用了纯css滑动标题。这样做的目的是在图像悬停时，整个标题从右向左滑动

然而，它似乎不起作用。我的代码基于，这样全幅图像将有一个标题。它是programmesimages和programmesimagescaption类。 * { 边际：0px； 填充：0px； } 身体{ 背景：url../images/minute_white_mini_waves.png repeat； } 包装纸{ 宽度：1180px； 保证金：0自动； 溢出：隐藏； 位置：相对位置； } 节目内容{ 位置：相对位置； 宽度：100%； 高度：1000px； 背景：333人； z指数：-50； 利润上限：-73px； } .programmesimages{ 位置：相对位置； 宽度：100%； 高度：600px； 背景：fff； 溢出：隐藏； } .programmesimagesimg{ 位置：绝对位置； 左：0； -webkit过渡：所有300毫秒的速度都很慢； -moz转换：所有300毫秒的时间都会变慢； -o型过渡：所有300毫秒都放松； -ms转换：所有300毫秒都放松； 过渡：所有300毫秒都放松； } .程序图像分割{ 背景色：CF0； 位置：绝对位置； 颜色：fff； z指数：100； -webkit过渡：所有300毫秒的速度都很慢； -moz转换：所有300毫秒的时间都会变慢； -o型过渡：所有300毫秒都放松； -ms转换：所有300毫秒都放松； 过渡：所有300毫秒都放松； 宽度：1180px； 高度：600px； 左：1180px； } .programmesimages:悬停.programmesimagescaption{ -moz变换：translateX-100%； -o-转化：translateX-100%； -webkit转化：translateX-100%； 不透明度：1； 转化：translateX-100%； } .程序图片：悬停图片{ -moz变换：translateX-100%； -o-转化：translateX-100%； -webkit转化：translateX-100%； 转化：translateX-100%； } 说明文字

---

感谢您使用“代码片段”按钮，但是您能否将其缩小到仍然存在问题的最小示例。对我们和您来说，这将更容易调试。目前，它似乎是一个完整的网页，所有的CSS和它的大部分只是噪音的问题。是的，我已经做到了！哦，嘿，不用担心，谢谢，我已经解决了这个问题。这是一个非常混乱的Z-index问题，它迫使我所有页面上的每个元素都向下移动，所以没有任何东西可以悬停