文章/答案/技术大牛

发布

社区首页 >问答首页 >列图像悬停文本

问列图像悬停文本
EN

Stack Overflow用户

提问于 2016-08-19 20:38:20

回答 1查看 343关注 0票数 0

大家好，大家看我的问题:)

我目前正在与一个“类似砖石外观”主屏幕网站工作。有两个不同大小的4x4图像，每个列中有一个图像是隐藏的。

到目前为止，它进行得相当不错，但现在我仍然停留在文字效果时，悬停其中一张图片。

当光标是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;
}

我将添加一些zip.-文件与.css，.html和图像。链接到Dropbox

html

css

masonry

回答 1

Stack Overflow用户

发布于 2016-08-19 20:42:19

以下的写作可能对你有帮助：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39047325

复制

相似问题

问列图像悬停文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问列图像悬停文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问列图像悬停文本
EN