CSS图像滚动文本

我在一个个人网站上工作，我想有滚动的图像。在其上获得低不透明度渐变效果，并显示文字）

我在翻滚时有褪色的不透明度，但我无法显示文本

这是我的密码

HTML

---

我是不是错过了一些很明显的东西

不会触发

span:hover

，因为它被设置为

display:none

。相反，通过

a:hover

：

#featured ul li.item a:hover span {
    display: block;
}

---

html中没有显示ID的内容。太棒了！谢谢你，我工作了。只是我自己看代码时的愚蠢

#featured ul li.item {
    height: 200px;
    width: 256px;
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#featured ul li.item a {
    color: #fff;
    width: 256px;
    height: 200px;
    display: block;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}

#featured ul li.item a:hover {
    background: white;
    opacity: .70;
}

#featured ul li.item a span {
    display: none;
    width: 256px;
    height: 200px;
    font-size: 13px;
    color: red;
}

#featured ul li.item a span:hover {
    display: block;
}

.i1 {
    background: url('../img/1.jpg');
}

#featured ul li.item a:hover span {
    display: block;
}