css 悬停图片显示文字 |好看的css列表页

img:hover::before {
content: "这是图片的说明文字";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 20px;
}

以上是实现悬停图片显示文字的CSS代码。其中，:hover选择器表示当鼠标悬停在图片上时触发此效果。::before伪元素表示在图片之前插入一个文字块。

在具体的CSS属性中，position: absolute表示该文字块的位置为绝对定位，bottom: 0和left: 0表示该文字块的位置在图片的左下角，width: 100%表示该文字块的宽度与图片的宽度相等，padding: 10px表示该文字块内部的padding为10个像素，background-color: rgba(0, 0, 0, 0.6)表示该文字块的背景色为半透明的黑色，color: #fff表示该文字块的文字颜色为白色，font-size: 20px表示该文字块的字体大小为20像素。

通过以上CSS代码，大家可以实现在图片上悬停显示文字的效果。这种技巧非常实用，可以帮助大家在展示图片的同时，更加准确地传达信息。