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

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 处于悬停状态时，定位图像元素以更改不透明度并更改描述的显示属性。

#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

你的意思是文字应该出现在透明图片后面？另外，所有缩略图都是 200 像素 x 200 像素吗？

如果是，你可以这样做：

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

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

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

Hover over image making it transparent and showing text

html

css

image

hover

transparency