將鼠標懸停在圖像上使其透明並顯示文字

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

我只是在它

的工作做了一些改動嘗試一下

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

它看起來很簡單，只是添加了一些額外的標籤。試試吧，讓我知道反饋

Answer 2

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

你的意思是文本應該出現透明像素的後面？此外，所有的縮略圖200px乘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>