Html 每个图像的单个文本覆盖

所以我有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具有这些效果

当然，叠加是css的工作，基本上是z索引的工作。因为，您需要每个图像，重定向到它自己的页面，所以，在您的锚定标记

中，使用

并使用css设计具有悬停效果的div。此外，如果您想在鼠标输入时显示一些文本，则必须使用Javascript

请提供JSFIDLE。