マウスオーバーで画像にテキストが表示されますか？

Question

mouserが（JSを使用せずに）マウスの上に置かれたときにテキストを表示したい、html/cssで遊んだり、stackoverflowを見ていても、この機能を実装する方法は見つけられません。誰でもアイデアはありますか？もう一度、助けてくれてありがとう。

イメージの下に既にテキスト（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

Answer 1

を実装する方法のアイデアを持っているので、私は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>

EDIT：中心テキスト