Question

我正试图在图像和文本之间进行转换。我网站的屏幕截图是here，其中显示了电影的图像。在悬停时，我想要电影的描述，$row['description']将转换，然后点击进入相关页面。

  <div class="row">
<?php 
    $numrow = 1;
    while($row = mysqli_fetch_assoc($result)){
    echo "<div class='col-lg-3 col-sm-4 col-xs-6'>";
    echo "<a href='#' class='thumbnail'>";
    echo "<img class='img-responsive' src='http://url/assets/posters/".$row['id']."_medium.jpg'>";
    echo "</a></div>";
} ?>
</div>

我不确定从哪里开始如此缺乏信息的应用。所有建议表示赞赏。

Answer 1

好的，请考虑发布您的HTML以获得更好的答案。这将为您提供一个开始。您需要将图片和文字放在具有<div>位置的同一absolute中。你可以像这样只使用CSS来应用这样的悬停样式：

＆＃13;

.item {position: relative; border: 1px solid #999; border-radius: 5px; overflow: hidden; width: 250px; height: 330px; cursor: pointer; display: inline-block;}
.item img,
.item p {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 5px; text-align: center; background-color: rgba(255,255,255,0.65); margin: 0; z-index: 1; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.item p {padding: 5px; z-index: 2; opacity: 0;}
.item:hover p {opacity: 1;}
.item:hover img {opacity: 0.25;}

＆＃13;

<div class="item">
  <img src="http://lorempixel.com/240/320/nature/1/" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum a eligendi sunt necessitatibus? Consequuntur, animi neque architecto.</p>
</div>
<div class="item">
  <img src="http://lorempixel.com/240/320/cats/1/" alt="" />
  <p>Nihil fugiat fuga sequi unde eum sunt alias doloribus obcaecati aut nostrum! Rerum, sint repellat reprehenderit dolorum quis inventore!</p>
</div>

＆＃13;

div中图像与文本之间的转换

1 个答案: