Блог

Главная - Вопросы по программированию - увеличьте изображение при наведении и покажите переменную php ниже

увеличьте изображение при наведении и покажите переменную php ниже

#php #html #css #image

#php #HTML #css #изображение

Вопрос:

У меня есть php-файл, в котором я сделал несколько запросов к базе данных phpbb, получив некоторые переменные (например, topic_title и ссылку на изображение)

Я знаю, как отображать изображения в php, но теперь я хочу увеличить их при наведении курсора мыши, и, когда изображение большое, покажите заголовок темы ниже, возможно ли это?

вот код:

   echo '<table cellspan="4">';
      echo "<tr>n";
      while ($fila = $resultado->fetch_assoc()) {
          preg_match('/[r?img:(.*?)](.*?)[/r?img:(.*?)]/', $fila['post_text'], $fila_contenido);
          $sololink = preg_replace('[^a-zA-Z0-9_ .-]','',@$fila_contenido[2]);
          $fila2 = $fila["post_subject"];
          echo "<th><img src=$sololink></th>";
       }
  echo "</tr>n";

затем я хочу увеличить $ sololink (изображение) при наведении и показать $ fila2 (заголовок) под увеличенным изображением

Спасибо

Комментарии:

1. Вероятно, вы можете увеличить изображение с помощью CSS, но вам понадобится JavaScript, если вы хотите, чтобы заголовок был видимым или перемещался.

2. @DaveChen отображение, скрытие и перемещение элементов могут быть достигнуты с помощью css, переходов и анимации без использования js.

3. oki … но как? я не знаю, как добиться этого эффекта

4. @t.niese Да, я опубликовал ответ, но это возможно только в том случае, если у вас есть родительский контейнер (которого не было в его первоначальном вопросе).

Ответ №1:

Вот пример использования только CSS.

HTML:

 <div class="container">
    <img class="image" src="http://lorempixel.com/400/200/" />
    <div class="title">Title of this image is here</div>
</div>

CSS:

 .image {
    -webkit-transition: width 2s, height 2s;
    transition: width 2s, height 2s;
    width: 400px;
    height: 200px;
}

.title {
    -webkit-transition: opacity 2s;
    transition: opacity 2s;
    font-size: 30px;
    opacity: 0;
}

.container:hover .image {
    width: 600px;
    height: 300px;
}

.container:hover .title {
    opacity: 1;
}

Пример

Метки: