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

Question

嘿，我正在制作一个投资组合页面（仅使用HTML和CSS），并创建了一个图像网格。 我的计划是，将一张悬停在上面的图像变得透明（0.2透明左右），并在此字段中显示说明文字。

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

HTML：

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

您可以在CSS部分帮助我吗？

Answer 1

当div处于悬停状态时，Image元素将更改不透明度并更改描述的显示属性。

 #imagelist:hover img { opacity: .2; } #imagelist:hover .imgtext { display: block; } .imgtext {display: none;} 

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

Answer 2

您是说文字应该出现在透明图片的后面吗？ 另外，所有缩略图都是200px x 200px吗？

如果是，则可以这样：

 #imagelist a { width: 200px; height: 200px; position: relative; display: block; } #imagelist img { position: absolute; left: 0; top: 0; bottom: 100%; height: 100%; z-index: 1; } #imagelist img:hover { opacity: 0.2; } 

 <div id="imagelist"> <a href=""> <img src="http://s0.geograph.org.uk/geophotos/03/97/06/3970600_94c29e78.jpg" /> <p class="imgtext">This is the description text. </p> </a> </div> 

Answer 3

我只是在做

进行一些更改尝试一下

<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>

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