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

当然，叠加是css的工作，基本上是z-index的工作。因为，您希望每个图像都重定向到自己的页面，因此，在您的锚标记<a></a>中，使用<div id="overlay"><img src="#"></div>并使用css设计具有悬停效果的div。此外，如果要在鼠标输入时显示某些文本，则必须使用Javascript。

每张图片的单独文字叠加

1 个答案: