如何使用CSS同时添加静态文本并将图像悬停在图像上？

问题描述：

Dears，我使用下面的代码显示数据库中的图像列表，并在悬停时显示图像上的一些文本（也来自数据库）。我需要对图像，以保持当前的设置，但也添加更多的文字（从DB），但始终显示（静态）：如何使用CSS同时添加静态文本并将图像悬停在图像上？

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 
}

答

为什么不干脆：

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

因为我需要添加背景颜色，还有一些造型。我需要从数据库中获取所有数据。我没有悬停文字的问题，我只需要添加额外的文字来显示总是（没有悬停） –

然后，你总是希望可见的文本，应该只是一个不同的跨度或标签元素，具有不同的样式。 –

它没有为我工作，它总是显示在图像上方或下方，但没有在它上面。如果你能给我一个代码的例子，我将不胜感激。谢谢 –

答

你可以改一下使用HTML5这样的跨度[R你的HTML是相同的（虽然我会改变它，而不使用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>

这显示图像下方的文字。但我想让它结束。正如悬停文本，但没有悬停。谢谢。 –

如何使用CSS同时添加静态文本并将图像悬停在图像上？

相关推荐