호버상의 이미지의 가운데 콘텐츠

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

부모 요소는 컨테이너에 대하여 이동하는 하위 요소의 순서로 설정된 위치 결정을 필요로한다. 이렇게 할 수있는 한 가지 방법은 먼저 position: relative을 .image-wrap 상위 div에 추가하는 것입니다. 그런 다음 .likes 클래스에서 상대 위치를 position: absolute으로 바꿉니다.

펜을 사용하여 코드를 테스트 (약간 수정) 한 코드를 추가했는데,이 코드는 어떤 결과일까요? 나는 거기에 전이를 던졌지 만 그것을 제거하고 bottom 속성으로 게임을하면 원하는 곳으로 갈 수 있습니다. 또한 부모에 정적 높이를 추가했습니다.

Pen