个别文字覆盖每个图像

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。