ホバー上の画像上の中心のコンテンツ

Question

私は画像ギャラリーを持っています。私は、画像の上にホバーしたときに、画像の中央にコンテンツの一部（インスタントグラム上にある写真の好きな数）を表示したい。このコンテンツと画像は、同じ親要素の下の兄弟であるため、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

親要素は、容器に関連して移動する子要素のために設定された位置決めを必要とします。あなたがこれを行う方法の1つは、最初にposition: relativeを親のdivの.image-wrapに追加することです。次に、.likesクラスで、相対位置をposition: absoluteに置き換えます。

これをテストするためにあなたのコードをペンに追加しましたが（やや修正しました）、これはあなたが進めていることでしょうか？私はそこにトランジションをスローしましたが、それを削除してbottomのプロパティで遊んで、どこにいてもそれを得ることができます。また、親に静的な高さを追加したことにも注意してください。

Pen