Question

我有一个php文件，我在phpbb数据库中查询了一些变量（如topic_title和图像链接）

我知道如何在php中显示图像，但是现在我想在悬停时使它们更大，并且，当图像很大时，显示下面的主题标题，这是否可行？

这是代码：

  echo '<table cellspan="4">';
      echo "<tr>\n";
      while ($fila = $resultado->fetch_assoc()) {
          preg_match('/\[r?img:(.*?)\](.*?)\[\/r?img:(.*?)\]/', $fila['post_text'], $fila_contenido);
          $sololink = preg_replace('[^a-zA-Z0-9_+.-]','',@$fila_contenido[2]);
          $fila2 = $fila["post_subject"];
          echo "<th><img src=$sololink></th>";
       }
  echo "</tr>\n";

然后我想在悬停时增加$ sololink（图像），并在增长的图像下方显示$ fila2（标题）

感谢

Answer 1

以下是仅使用CSS的示例。

HTML：

<div class="container">
    <img class="image" src="http://lorempixel.com/400/200/" />
    <div class="title">Title of this image is here</div>
</div>

CSS：

.image {
    -webkit-transition: width 2s, height 2s;
    transition: width 2s, height 2s;
    width: 400px;
    height: 200px;
}

.title {
    -webkit-transition: opacity 2s;
    transition: opacity 2s;
    font-size: 30px;
    opacity: 0;
}

.container:hover .image {
    width: 600px;
    height: 300px;
}

.container:hover .title {
    opacity: 1;
}

Example

在悬停时使图像变大，并在下面显示php变量

1 个答案: