div内图像到文本之间的转换

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：

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

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