Question

大家好，在那里读我的问题：）

我目前正在使用＆＃34; Masonry-lookalike＆＃34;主屏幕。有4x4图像，有2种不同的尺寸，每列中有1张图像被隐藏。

到目前为止，它还是相当不错，但现在我在悬停其中一个图像时卡在文本效果上。

如果光标在hovering上方image，则应在其底部显示一个小text-box。

如何在不破坏砌体的情况下将它们一个放在另一个之上？
我在哪里将文字放在html代码中？

对不起我的英语，因为我来自奥地利，所以不是最好的;）

HTML：

<!DOCTYPE html>
<!-- HTML -->
<html>
<!-- HEAD -->

<head>
    <!-- STYLESHEET -->
    <link href="style.css" rel="stylesheet" type="text/css" />

    <!-- UTF-8 -->
    <meta charset="utf-8">

</head>
<!-- HEAD END -->
<!-- --------------------------------------------------------------- -->
<!-- BODY -->

<body>
    <div id="img-container">
        <ul id="content">
            <li><img class="img_a" src="data/placeholder_a.png" alt="" />
            </li>
            <li><img class="img_c" src="data/placeholder_c.png" alt="" />
            </li>
            <li><img class="img_b" src="data/placeholder_b.png" alt="" />
            </li>

            <li><img class="img_a" src="data/placeholder_a.png" alt="" />
            </li>
            <li><img class="img_a" src="data/placeholder_a.png" alt="" />
            </li>
            <li><img class="img_a" src="data/placeholder_a.png" alt="" />
            </li>
            <li><img class="img_c" src="data/placeholder_c.png" alt="" />
            </li>

            <li><img class="img_b" src="data/placeholder_b.png" alt="" />
            </li>
            <li><img class="img_c" src="data/placeholder_c.png" alt="" />
            </li>
            <li><img class="img_a" src="data/placeholder_a.png" alt="" />
            </li>

            <li><img class="img_a" src="data/placeholder_a.png" alt="" />
            </li>
            <li><img class="img_c" src="data/placeholder_c.png" alt="" />
            </li>
            <li><img class="img_b" src="data/placeholder_b.png" alt="" />
            </li>
        </ul>
    </div>
</body>
<!-- BODY END -->

</html>
<!-- HTML END -->

CSS：

body {
    margin: 0;
    padding: 0;
}
#img-container {
    width: 1200px;
    margin: 0 auto;
    font-size: 0;
}
#content {
    column-count: 4;
    column-gap: 10px;
}
#content li img {
    margin-bottom: 10px;
    width: 100%;
    display: block;
}
/* ---------------------  HOVER EFFECTS  --------------------- */

.img_a:hover {
    opacity: 0.5;
}
.img_b:hover {
    opacity: 0.5;
}
.img_c:hover {
    opacity: 0.5;
}

我将使用.css .html和图片附加一些zip.-file。 Link to Dropbox

Answer 1

以下文章可能会对您有所帮助：

http://geekgirllife.com/place-text-over-images-on-hover-without-javascript/

这是我遇到的最简单的方法之一。将包含文本的div标记放在img标记的正下方。

列图像悬停文字

1 个答案: