duanpo7796 2016-11-16 17:29
浏览 49
已采纳

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

Dears, I'm using the code below to show list of images from database and showing some text (also from DB) over the images when hover. I need to keep the current settings but to also add one more text (from DB) but to be shown always (static) over the image:

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;
}

Code:

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
}
  • 写回答

2条回答 默认 最新

  • douchun9719 2016-11-16 17:49
    关注

    You could change a bit your HTML using HTML5 so the span remains the same (although I would change it as well without using br) and both the image and the caption are wrapped under the HTML5 figure tag.

    <a href="#">
      <span class="text">Hover text</span>
      <figure>
        <img src="#" alt="foo" width=500 height=400>
        <figcaption>
          Text underneath
        </figcaption>
      </figure>
    </a>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)