将鼠标悬停在照片上时获取有关照片的详细信息答案

【问题标题】：Getting details about a photo upon hovering over it将鼠标悬停在照片上时获取有关照片的详细信息
【发布时间】：2018-02-19 17:58:42
【问题描述】：

我正在构建一个页面，其中从数据库中检索到的各种图像显示在两列中。我想要的是，每当我将鼠标悬停在同一数据库上时，是否会出现有关每张图片的一些详细信息（例如，拍摄的国家和年份），如 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>

但什么也没发生。

我能做什么？

【问题讨论】：

标签： php html css mysql

【解决方案1】：

即使您的 css 示例在 Safari 浏览器中不起作用（至少对我而言），这也是一种快速而肮脏的解决方案。不过，我建议您查看 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>';
} 
?>

【讨论】：

【解决方案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;
  }

【讨论】：