Getting details about a photo upon hovering over it - php

Question

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?

Answer 1

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

Answer 2

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