마우스 오버로 이미지에 텍스트가 표시됩니까?

mouser가 JS를 사용하지 않고 이미지 위에 놓을 때 이미지에 텍스트를 표시하고 싶습니다. html/css로 놀아 보았습니다.이 기능을 구현할 수있는 방법을 찾을 수 없습니다. 누구나 아이디어가 있으십니까? 다시 한번 도움을 주셔서 감사합니다.마우스 오버로 이미지에 텍스트가 표시됩니까?

이미지 아래에 이미 텍스트 (h2)가 있다는 사실이 혼란 스럽습니다.이 방법 (Text on image mouseover?)을 사용해 보았는데 실패했습니다.

HTML

<ul class="portfolio"> 
    <li class="project option-1"> 
     <div class="project-image"> 
      <a href="default.asp"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"/> 
     </div> 
     <div class="project-info"> 
      <h2 class="project-info-title">Cricket Journey</h2> 
      </a> 
     </div> 
    </li>

나는 이미 내가 제대로 이해한다면, 당신이 원하는이 기능의 HTML 측면 만이 아니라 CSS

출처

2016-11-16 Jordan Miguel

을 구현하는 방법에 대한 아이디어를 가지고 있기 때문에 나는 CSS를 표시하고 있지 않다 이미지 위에 마우스를 올려 놓을 때 이미지 위에 표시 할 텍스트. 그렇다면, 표시 <p> (어떤 이미지를 마우스 오른쪽 이후) 이미지가 다음과 같이 가리킬 때

p { 
 
    /* position the text */ 
 
    position: absolute; 
 
    left: 0px; 
 
    display: none; 
 
    width: 300px; 
 
    text-align: center; 
 
    margin: 0; 
 
    height: 20px; 
 
    top: 140px; 
 
    
 
} 
 
img { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
img:hover + p { 
 
    display: block; 
 
}

<img src="/favicon.ico" height="300"> 
 
<p>some text to display here</p>

편집 :를 중심으로 텍스트

출처

2016-11-16 23:46:43 k97513

와우, 감사합니다 제비. 그게 근본적으로 해결되었지만 텍스트가 내 이미지 위에 약간 표시되었지만 어떻게 센터에 표시되도록 할 수 있습니까? –

'p'의 너비를 설정하고'text-align'을 가운데로 설정하면 텍스트를 중앙에 배치 할 수 있습니다. – k97513

원래 게시물에 추가했습니다. – k97513

마우스 오버로 이미지에 텍스트가 표시됩니까?

답변

관련 문제