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

I am building a page where various images, retrieved from a database, are displayed on two columns. What I want, is there to appear some details about each image (e.g., the country and the year it was taken in), extracted from the same database, whenever I hover over it, as seen here.

This is my code:

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

I tried to mimic excatly what it says here https://jsfiddle.net/govdqd8y/, like this:

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

but nothing happened.

What could I do?

Even though you css example doesn't work in the Safari browser (at least for me), this is one quick & dirty solution. Nevertheless, I would recommend you to look into the MVC pattern to separate HTML + PHP code.

<?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>';
} 
?>

See I have kept your HTML elements in order and edited some 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;
  }