Html 鼠标悬停在图像上之前的常量文本

我有这个

Html:

鼠标悬停时，必须在图像上显示文本

我需要的是使这个文本在图像本身的底部保持不变，当鼠标移到它上面时，它将移到顶部

我的意思是，在图像的最后一张

50px

中，我想要黑色背景和恒定文本，并且当鼠标移到相同的功能上时，将运行该功能

谢谢大家的建议。

我更新了您的JSFIDLE:

您需要删除和更改一些CSS规则以实现以下目标：

 ul.img-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
     height: 100%;
     text-align: center;
 }
 ul.img-list {
     display: inline-block;
     height: 150px;
     margin: 0 5px 1em 0;
     position: relative;
     width: 360px;
     margin-top:-5px;
 }
 ul.img-list li {
     position: relative;
 }
 span.text-content span {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 }
 ul.img-list li:hover span.text-content {
     height: 280px;
     /*opacity: 1;*/
 }
 span.text-content {
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
     color: white;
     cursor: pointer;
     display: table;
     height: 20px;
     left: 0;
     position: absolute;
     bottom: 0;
     width: 360px;
     /*opacity: 0;*/
     -webkit-transition: height 500ms;
     -moz-transition: height 500ms;
     -o-transition: height 500ms;
     transition: height 500ms;
     font-family: Droid Arabic Kufi;
     font-size: xx-large;
 }

---

首先，重复定义span.text-content

第二，我已经改变了你的css。检查小提琴

---

这就是你想要达到的目标吗

*{
保证金：0；
填充：0；
边界间距：0；
排名：0；
}
ul.img-list{
列表样式类型：无；
文本对齐：居中；
}
ul.img-list{
边界间距：0；
显示：内联块；
高度：150像素；
位置：相对位置；
宽度：360px；
}
span.text-content span{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
ul.img-list li：悬停span.text-content{
不透明度：1；
背景：rgba（0,0,0,0.5）；
利润上限：-280px；
高度：280px；
-网络工具包转换：500毫秒；
-moz转换：500ms；
-o-过渡：500ms；
过渡时间：500ms；
}
span.text-content{
背景：黑色；
位置：相对位置；
颜色：白色；
光标：指针；
显示：表格；
高度：50px；
左：0；
顶部：-5px；
宽度：360px；
不透明度：1；
-网络工具包转换：500毫秒；
-moz转换：500ms；
-o-过渡：500ms；
过渡时间：500ms；
字体系列：Droid阿拉伯语库菲；
字体大小：xx大号；
z指数：2；
}

要显示的文本

您是否尝试过自己解决此问题？是的，但没有成功解决。如果文本显示在图像之后而不是图像上，则在代码span.text-content中定义了相同的CSS规则3次，并且它们具有相同的重复属性。对于span.text-content和li:hover span.text-content，您应该只有一个规则。你应该考虑学习CSS基础知识。非常感谢，这正是我想要的，你很棒。

ul.img-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
     text-align: center;
 }
 ul.img-list {
     display: inline-block;
     height: 150px;
     margin: 0 5px 1em 0;
     position: relative;
     width: 360px;
     margin-top:-5px;
 }
 span.text-content {
     background: rgba(0, 0, 0, 0.5);
     color: white;
     cursor: pointer;
     display: table;
     height: 150px;
     left: 0;
     position: absolute;
     top: 0;
     width: 150px;
 }
 span.text-content span {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 }
 span.text-content {
     background: rgba(0, 0, 0, 0.5);
     color: white;
     cursor: pointer;
     display: table;
     height: 150px;
     left: 0;
     position: absolute;
     top: 0;
     width: 150px;
     opacity: 0;
 }
 ul.img-list li:hover span.text-content {
     opacity: 1;
 }
 span.text-content {
     background: rgba(0, 0, 0, 0.5);
     color: white;
     cursor: pointer;
     display: table;
     height: 280px;
     left: 0;
     position: absolute;
     top: 0;
     width: 360px;
     opacity: 0;
     -webkit-transition: opacity 500ms;
     -moz-transition: opacity 500ms;
     -o-transition: opacity 500ms;
     transition: opacity 500ms;
     font-family: Droid Arabic Kufi;
     font-size: xx-large;
 }

 ul.img-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
     height: 100%;
     text-align: center;
 }
 ul.img-list {
     display: inline-block;
     height: 150px;
     margin: 0 5px 1em 0;
     position: relative;
     width: 360px;
     margin-top:-5px;
 }
 ul.img-list li {
     position: relative;
 }
 span.text-content span {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 }
 ul.img-list li:hover span.text-content {
     height: 280px;
     /*opacity: 1;*/
 }
 span.text-content {
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
     color: white;
     cursor: pointer;
     display: table;
     height: 20px;
     left: 0;
     position: absolute;
     bottom: 0;
     width: 360px;
     /*opacity: 0;*/
     -webkit-transition: height 500ms;
     -moz-transition: height 500ms;
     -o-transition: height 500ms;
     transition: height 500ms;
     font-family: Droid Arabic Kufi;
     font-size: xx-large;
 }

 ul.img-list
 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: inline-block;
    height: 150px;
    margin: 0 5px 1em 0;
    position: relative;
    width: 360px;
    margin-top:-5px;

}

span.text-content span
{
    display: table-cell;
    text-align: center;
    vertical-align: bottom;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}


ul.img-list li:hover span.text-content
{
    opacity: 1;
    background: rgba(0,0,0,0.5);
    height:280px;
    top:0px;
}

ul.img-list li:hover span.text-content span
{
    vertical-align:middle;
}
span.text-content
{
    background: rgba(0,0,0,1);
    color: white;
    cursor: pointer;
    display: table;
    height: 50px;
    left: 0;
    position: absolute;
    top: 230px;
    width: 360px;
    opacity: 1;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    font-family: Droid Arabic Kufi;
    font-size: xx-large;
}