悬停在图像上的中心内容

Question

我有一个图像库。当图像悬停时，我想在图像的中心显示一块内容（喜欢的照片＃在Instagram上）。该内容和图像是同一父元素下的兄弟姐妹，因此我尝试使用位置：相对；和底部：50％；在内容上。结果是内容（P.likes类）不会上升其父元素的50％。为什么这不起作用？

.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;
}

<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>
    

Answer 1

父元素需要设置定位，以使子元素与容器相关。您可以做到这一点的一种方法是首先在.image-wrap Parent Div上添加position: relative。然后，在.likes类上，用position: absolute替换相对定位。

我将您的代码添加到笔上以对其进行测试（并稍作修改），但是这是您要做的吗？我在那里扔了一个过渡，但是您可以将其删除并使用bottom属性播放以将其获取所需的位置。另请注意，我为父母添加了一个静态高度。

笔