Html 将鼠标悬停在图像上，使其透明并显示文本

嘿，我正在使用HTML和CSS制作一个公文包页面，我创建了一个图像网格。我的计划是，悬停在上面的一个图像的透明度为0.2左右，并且在该字段中显示一个描述文本

我创建了以下代码，但这也使我的描述文本透明。 如何使文本保持完全可见

HTML:

---

你能帮我处理CSS部分吗？

当div处于悬停状态时，将图像元素作为目标，以更改不透明度并更改描述的显示属性

图像列表：悬停图像{ 不透明度：.2； } imagelist:hover.imgtext{ 显示：块； } .imgtext{display:none；}

---

你的意思是文本应该出现在透明图片的后面吗？还有，所有的缩略图是200px还是200px

如果是，您可以这样做：

图像列表a{ 宽度：200px； 高度：200px； 位置：相对位置； 显示：块； } 图像列表{ 位置：绝对位置； 左：0； 排名：0； 底部：100%； 身高：100%； z指数：1； } imagelist img：悬停{ 不透明度：0.2； } 我只是在努力

进行了一些更改，请尝试

<style>
            #imagelist a {position: relative;display: inline-block;}
            #imagelist a p{display: none;}
            #imagelist a:hover p{position: absolute;width: 100%;height: 100%;background: #000;opacity: 0.8;top: 0;left: 0;margin: 0;display: block;}
            #imagelist a p span{display: inline-table;width: 100%;height: 100%;text-align: center;color:#fff;}
            #imagelist a p span span{display: table-cell;vertical-align: middle;}
        </style>


<div id="imagelist">
            <a href="">
                <img src="img/img1.jpg" width="200px" height="200px" alt="Image 1" />
                <p class="imgtext">
                <span>
                    <span>This is the description text.</span>
                </span>
                </p>
            </a>
        </div>

---

它看起来很简单，只是添加了一些额外的标签。试试看，让我知道反馈信息

嘿，非常感谢，经过一些细微的调整后，这确实奏效了！

<style>
            #imagelist a {position: relative;display: inline-block;}
            #imagelist a p{display: none;}
            #imagelist a:hover p{position: absolute;width: 100%;height: 100%;background: #000;opacity: 0.8;top: 0;left: 0;margin: 0;display: block;}
            #imagelist a p span{display: inline-table;width: 100%;height: 100%;text-align: center;color:#fff;}
            #imagelist a p span span{display: table-cell;vertical-align: middle;}
        </style>


<div id="imagelist">
            <a href="">
                <img src="img/img1.jpg" width="200px" height="200px" alt="Image 1" />
                <p class="imgtext">
                <span>
                    <span>This is the description text.</span>
                </span>
                </p>
            </a>
        </div>