每个图像的单独文本叠加

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 设计你的 div 悬停效果。另外，如果你想在鼠标输入时显示一些文本，你必须使用Javascript。

每个图像的单独文本叠加

individual text overlay for each image

html

css

overlay