호버 상태에 이미지 위에 텍스트가 표시됩니다.

호버 상태 (http://francescaponzini.com/kay/)의 이미지 위에 약간의 텍스트가 표시됩니다. 지금까지 나는 CSS로 그것을 할 수있었습니다. 그러나 나는 포지셔닝에 어려움을 겪고있다. 사용자가 이미지의 어떤 지점을 가리킬 때 텍스트를 표시하고 싶습니다. 나는 상대방의 위치를 절대적으로 사용하려고 노력했지만 성공하지는 못했다.호버 상태에 이미지 위에 텍스트가 표시됩니다.

텍스트가 들어있는 div를 가질 수있는 방법이 있나요? 이미지의 크기가 같다고 가정 해 봅시다.

이 지금까지 내 코드입니다! 모든

<a class="image_link" href="http://francescaponzini.com/kay/?p=106"> 
    <img src="http://francescaponzini.com/kay/wp-content/uploads/2014/06/Firstname.png" width="450" height="575" alt="" style="width: 243px;">  
    <div class="text-content">Place Name</div> 
</a>

감사 어떤 도움이나 힌트 감사합니다.

출처

2014-07-20 user2834426

가의 관련 CSS를 보여주세요 질문 – Popnoodles

나는 비슷한 질문 [여기] (http://stackoverflow.com/questions/24794985/jquery-is-it-possible-to-use-slideup-and-append-text-at-the)에 대한 답을 썼습니다. -same-time/24795314 # 24795314). 전환을 원하지 않는다면'#parentDiv : hover #description {display : block}'과'#description {display : none;} '과'# description'의 올바른 위치 지정 만 필요합니다. . – royhowie

그는 .text-content에서도'opacity : 0'을 제거해야합니다. –

.image_link:hover .text-content { 
    opacity: 1; 
}

출처

2014-07-20 15:44:44 smistry

너무 효과적입니다. 고마워요. – user2834426

변경에게 포장 링크의 display을하고 postition 제공 :

body.home .hentry > a { 
    position: relative; 
    display: block; 
    ... 
}

위치 내용 블록을하고 포장 요소를 입력합니다

.text-content { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    /* Remove width and height declarations */ 
    ... 
}

출처

2014-07-20 15:47:36 JoeJ

"텍스트가 들어있는 div를 가질 수있는 방법이 이미지의 동일한 크기라고 가정합니다"라고 오해했을 수도 있습니다. – JoeJ

마우스를 놓을 때 표시되는 텍스트의 비트를 중심으로하려고합니다. 이미지 내에 있기 때문에 div .text-content가 image_link와 동일한 차원이되어야한다고 생각합니다. 하지만 내가 틀릴 수도 ... – user2834426

호버 상태에 이미지 위에 텍스트가 표시됩니다.

답변

관련 문제