Как добавить статический текст и наведите текст поверх изображения одновременно с помощью CSS?

Question

Dears, Я использую приведенный ниже код для отображения списка изображений из базы данных и отображения некоторого текста (также из БД) над изображениями при наведении указателя мыши. мне нужно, чтобы сохранить текущие настройки, но также добавить еще один текст (из БД), но будет показан всегда (статический) над изображением:

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 
} 

Answer 1

Почему не просто:

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

Answer 2

Вы можете немного изменить ваш HTML с помощью HTML5 так калибровочный г (хотя я бы тоже изменил его, не используя br), и изображение, и заголовок обернуты под тегом показателя HTML5.

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