Получение деталей о фотографии при наведении на нее

Question

Получение деталей о фотографии при наведении на нее

0

Я создаю страницу, где различные изображения, извлеченные из базы данных, отображаются в двух столбцах. Я хочу, чтобы некоторые детали изображения (например, страна и год, в которые он был взят), были представлены из той же базы данных, когда я наводил на нее курсор, как видно здесь.

Это мой код:

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>

но ничего не произошло.

Что я мог сделать?

Caterina Caraza 19 фев. 2018, в 11:20

Источник

Теги:

php

mysql

html

css

2 ответа

Ещё вопросы

fab · Answer 1 · 2018-02-19T08-28-00.000Z

Несмотря на то, что пример css не работает в браузере Safari (по крайней мере, для меня), это одно быстрое и грязное решение. Тем не менее, я бы рекомендовал вам изучить шаблон MVC для разделения кода 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>';
} 
?>

Athul · Answer 2 · 2018-02-19T08-09-00.000Z

Смотрите, что я сохранил ваши 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;
  }