将内容放在悬停图像上方

Question

我有一个图片库。 当图像悬停在图像的中心时，我想在图像的中心显示一条内容（该照片在instagram上的点赞次数）。 此内容和图像是同一个父元素下的同级，因此我尝试使用position：relative; 底部：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

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

我将您的代码添加到笔中以进行测试（并稍加修改），但这是您要做什么？ 我在其中进行了过渡，但是您可以删除该过渡并使用bottom属性将其移到所需位置。 另请注意，我向父级添加了静态高度。

钢笔