CSSを使用して画像に静的テキストとホバーテキストを同時に追加するにはどうすればよいですか？

Question

Dear、 私は以下のコードを使用して、データベースからの画像のリストを表示し、ホバーすると画像上にテキスト（DBからも）を表示します。

CSS：

.wrapper { 
position: relative; 
padding: 0; 
width:100px; 
display:block; 
} 
.text { 
position: absolute; 
top: 0; 
color:#333; 
background-color:rgba(255,255,255,0.2); 
width: 500px; 
font-size:18px; 
height: 100%; 
line-height:100px; 
text-align: center; 
z-index: 10; 
opacity: 0; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 
.text:hover { 
opacity:1; 
} 


.img { 
z-index:1; 
} 

.grid { 
position:relative; 
float:left; 
width: 500px; 
height:333px; 
margin-bottom: 10px; 
margin-right: 10px; 
border: 0; 
text-align:center; 
vertical-align:middle; 
} 

コード：

foreach($dbrow as $row) { 

?> 
<div class="grid"> 
    <a href="<?php echo $row['hotel_url']; ?>" class="wrapper"> 
     <span class="text"> 
      <b><?php echo $row['name']; ?></b> 
      <br/> 
      <?php echo $row['desc_en']; ?> 
      <br/> 
      <i>Book Now</i> 
     </span> 
     <img align="center" src="<?php echo $row['photo_url']; ?>"> 
    </a> 
</div> 
<?php 
} 

私は、画像の上に、現在の設定を維持するだけでなく、（DBから）1つの以上のテキストを追加することなく、（静的）常に表示する必要がありますなぜ単に

Answer 1

：

.text { display: none; } 
.text:hover { display: block } 

Answer 2

あなたはビットを変えることができるHTML5ので、スパンRを使用して、HTML （私もbrを使わないでそれを変更するだろうが）同じイメージを持ち、イメージとキャプションの両方がHTML5 Figureタグの下にくる。

<a href="#"> 
    <span class="text">Hover text</span> 
    <figure> 
    <img src="#" alt="foo" width=500 height=400> 
    <figcaption> 
     Text underneath 
    </figcaption> 
    </figure> 
</a>