個別文字覆蓋每個圖像

Question

所以我有12列圖像。一些圖像點擊後會導致另一頁。我想要點擊一些圖像來打開文本框並調暗背景（覆蓋圖）。不過，我希望每個圖像打開一個文本框，說明它是自己的東西。我讀過，這可以用CSS來完成，但我不知道如何去做這件事，因爲我希望每個圖像都有它自己的文本框。

<div class="container"> 
     <div class="row"> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <img class="grayscale" src="img6.jpg" width="220px"height="220px"> 
       </div> 
      </div> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <a href="christmas_homepage.html"><img class="grayscale" src="img1.png" width="220px"height="220px"></a> 
       </div> 
      </div> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <img class="grayscale" src="uiuc.png" width="220px"height="220px"> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <a href="cupcakes.html"><img class="grayscale"src="img4.png" width="220px"height="220px"></a> 
       </div> 
      </div> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <img class="grayscale"src="swe.png" width="220px"height="220px"> 
       </div> 
      </div> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <img class="grayscale" src="fashion2.png" width="220px"height="220px"> 
        <!-- the runway needs to be clickable--> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <img class="grayscale" src="india.png" width="220px"height="220px"> 
       </div> 
      </div> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <img class="grayscale"src="nielsen.png" width="220px"height="220px"> 
       </div> 
      </div> 
      <div class = "col-md-4"> 
       <div class ="boxed"> 
        <img class="grayscale" src="city.png" width="220px"height="220px"> 
       </div> 
      </div> 
     </div> 
    </div> 

在這種情況下

，我想img6和IMG1有這些影響如果可能的話。

Answer 1

當然，overlay是css的工作，基本上是z-index的工作。因爲，你希望每個圖像都重定向到它自己的頁面，所以，在你的錨標記<a></a>中，使用<div id="overlay"><img src="#"></div>並使用css設計懸停效果。另外，如果你想在鼠標上輸入一些文本，你必須使用Javascript。