时间戳

首页 > 解决方案 > 如何在图像上叠加 2 个元素

css - 如何在图像上叠加 2 个元素

问题描述

在我的摄影作品集中，我在自动填充显示宽度的轨道中显示一系列不同比例的图像。这是完美的......在得到一些帮助之后。

我的最终目标是在每个图像的左上角永久显示一个小心脏，并在每个图像的底部显示一个半透明条，其中仅在鼠标悬停图像时包含标题。

我几乎已经达到了这个结果，但是在尝试了几个小时后我无法弄清楚如何覆盖上面解释的两个元素......所以现在它们一起在图像的顶部......这不是最佳的。

因此，如果可能的话，我希望能得到一些帮助来实现这一结果。

这是有问题的代码的一部分，可以在我的网站上找到一个示例：TwoOverlaysOnImage。

CSS 代码

.my-flex-item {
    background-color: #1d1d1d;
    border: 2px solid #1d1d1d;
    height: 100px;
}

.img-holder {
    position: relative; 
    display: inline-block;
}

.img-holder p {
    position: absolute; 
    display: inline-block;
    text-align: left !important;
    font-size: 0.7em !important;
    width: 100%;
}

.img-holder:hover > p {
    background-color: rgba(60,60,60,0.7);
    text-align: center !important;
}

.img-holder span {
    margin-top:40px;
    color: white !important;
    left: 30px;
}

HTML 代码

<div class="d-flex flex-row flex-wrap justify-content-center">

    <div class="img-holder">
        <p>
            <img src="heart0.png" style="margin-left:6px; margin-top:4px;"/>
            <span class="thumbCaption">caption</span>
        </p>
        <a href="modal...">
            <img class="my-flex-item" src="imagepath..." alt="caption..." />
        </a>
    </div>
</div>

标签： cssflexboxoverlay

解决方案

尝试这个：

html:

 <div style="width: 100%; display: flex; justify-content: center;">
    <div id="img-cont" class="img-cont">
        <img class="heart" src="path/to/heart/icon">
        <div class = "hover">
                <p>Sample Text</p>
            </div>
        </div>
    </div>

CSS：

.img-cont{
    position: relative;
    width: 420px;
    height: 300px;
    cursor: pointer;
    background-size: cover;
    background-image: url("https://images.unsplash.com/photo-1588876315093-ce09afb34028?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}

.img-cont .heart{
    position: absolute;
    color: white; 
    top: 15px; 
    left: 15px;
    cursor: pointer;
}

.hover{
    clip-path: url(#img-cont);
    position: absolute;
    height: 0;
    width: 100%;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.img-cont:hover .hover{
    height: 50%;
}

.hover p{
    color: white;
}

推荐阅读