Question

我正在构建一个页面，其中从数据库中检索的各种图像显示在两列上。我想要的是，每当我将鼠标悬停在同一个数据库中时，会显示每个图像的一些细节（例如，所拍摄的国家/地区和年份），如here所示。

这是我的代码：

HTML：

<!-- Photo Library -->
<div class="content">
  <div class="row"> 
   <div class="column">
    <?php 
    include("getimg.php");
    ?>
   </div>
  </div>
</div>

PHP：

<?php
$query = "SELECT * FROM photos ORDER BY id  DESC";
$result = mysqli_query($mysqli, $query);

while($photo = mysqli_fetch_assoc($result)) {

echo '<img id="myimg" src="'. $photo['photopath'] .'" 
alt="'.$photo['photoname'].'"height:"500"  width="640">'; } 
?>

CSS：

.content {
background-color: #e8d9d9;
}

.row {
display: -ms-flexbox; /* IE 10 */
display: flex;
-ms-flex-wrap: wrap; /* IE 10 */
flex-wrap: wrap;
padding: 0 18px;
}

.column {
-ms-flex: 50%; /* IE 10 */
flex: 50%;
padding: 4 4px;
}

.column img {
margin-top: 8px;
margin-left: 8px;
vertical-align: middle;
}

.column img:hover {
opacity: 0.5;
}

我试图模仿这里所说的https://jsfiddle.net/govdqd8y/，就像这样：

<div class="column">
  <?php 
  include("getimg.php");
  ?>
  <div class="img__description_layer">
  <p class="img__description"> (whatever text) </p>
  </div>
</div>

但没有发生任何事情。

我该怎么办？

Answer 1

即使你的例子不能在Safari浏览器中工作（至少对我而言），这是一个快速的＆amp;肮脏的解决不过，我建议您查看MVC pattern以分隔HTML + PHP代码。

<?php
$query = "SELECT * FROM photos ORDER BY id  DESC";
$result = mysqli_query($mysqli, $query);

while($photo = mysqli_fetch_assoc($result)) {

    echo '<div class="img__wrap">';
    echo '<img id="myimg" class="img__img" src="'. $photo["photopath"] .'" alt="'.$photo["photoname"].'" height="500"  width="640">'; 
    echo '<div class="img__description_layer">';
    echo '<p class="img__description">'.$photo["photoname"].'</p>';
    echo '</div>';
    echo '</div>';
} 
?>

Answer 2

请参阅我保留了HTML个元素，并编辑了一些css

<div class="column">
         <img class="img__img" src="http://placehold.it/257x200.jpg" />
          <div class="img__description_layer">
            <p class="img__description"> (whatever text) </p>
          </div>
        </div>
  </div>

CSS

.row {
     display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 18px;
 }
 .column {
        position: relative;
 }
 .column .img__img {
     display: block;
 }
 .img__description_layer {
     position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
     height: 100%;
     background: #f0f8ff91;
     opacity: 0;
        transition:all .5s;
 }
  .column:hover .img__description_layer {
      opacity: 1;
  }

将照片悬停在照片上以获取有关照片的详细信息

2 个答案: