Question

我有一个图片库。我想在图像悬停时显示图像中心的一段内容（图片中有照片的＃）。这个内容和图像是同一个父元素下的兄弟，所以我试图使用position：relative;和底部：50％;关于内容。结果是内容（p.likes类）不会向上移动其父元素的50％。为什么这不起作用？

＆＃13;

.photo-box {
    width: 100%;
    display: inline-block;
    margin: 0 0 .75em;
    background-color: lightgrey;
    /*border: 1px solid pink;*/
}

.photo-box .image-wrap {
    width: 100%;
    height: auto;
    max-height: 100%;
    padding: none;
    background-color: lightgrey;
    /*border: 1px solid red;*/
}

.image-wrap img {
    width: 100%;
    display: inline-block;
    margin-bottom: 0px;
    padding: none;
}

.image-wrap:hover img {
    opacity: .8;
}

.image-wrap a {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: none;
}

p.likes {
    width: 100%;
    visibility: hidden;
    position: relative;
    bottom: 50%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    /*border: 1px solid red;*/
}

.photo-box:hover p.likes {
    visibility: visible;
}

＆＃13;

<div class="photo-box">
    <div class="image-wrap wow fadeIn">
        <a href="{{link}}" target="_blank">
            <img src="{{image}}">
        </a>
        <p class="likes"><i class="fa fa-heart" aria-hidden="true"></i> {{likes}}</p>
    </div>
</div>

＆＃13;

Answer 1

父元素需要设置定位，以便子元素相对于容器移动。一种方法是首先在position: relative父div上添加.image-wrap。然后，在.likes上，将相对定位替换为position: absolute。

我将你的代码添加到笔中以测试它（并略微修改），但这是你要去的吗？我在那里进行了转换，但您可以删除它并使用bottom属性来获取它所需的位置。另请注意，我向父级添加了静态高度。

Pen

悬停时图像中心内容

1 个答案: