Как создать миниатюры с парящим отображением на простой HTML-странице?

Question

У меня есть несколько больших файлов .png (.jpg, ...), для просмотра которых требуется полный экран. Как создать миниатюры на стандартной странице HTML? Есть ли какой-то элемент управления масштабированием размера в теге, который я как-то пропустил?

Можно ли отобразить большое изображение при наведении курсора мыши на такой эскиз? (JavaScript и CSS подходят для любого ответа).

РЕДАКТИРОВАТЬ: поскольку целевые браузеры могут отображаться с разным разрешением размера, как мне сохранить миниатюру, пропорционально масштабированную к отображаемому размеру веб-страницы / текста?

Answer 1

Техника действительно сводится к дыму и зеркалам, поскольку оба изображения непосредственно кодируются на странице.Однако большое изображение становится невидимым через CSS и становится видимым только тогда, когда посетитель наводит курсор на ссылку.При нажатии на ссылку откроется полноразмерное изображение на новой странице.Изображение выше закодировано как:

<div id="links" align="center">
  <div class="thumbnail" style="background-image: url(../thumbs/294.jpg)">
    <a href="../images/nebulan90.jpg" target="_blank">
    Nebula N90<img src="../images/nebulan90-s.jpg" alt="Nebula N90" /></a>
  </div>
</div> 

Изображения, связанные в разделе, автоматически скрываются с помощью CSS:

#links a img {
  height: 0;
  width: 0;
  border-width: 0;
} 

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

#links a {
  display:block;
  padding-top: 110px;
} 

Более крупное изображение отображается над ссылкой, когдакурсор наведен на него:

#links a:hover img {
  position: relative;
  top: -260px;
  left: -90px;
  height: 240px;
  width: 320px;
  border-width: 2px;
  border-color: #0ff;
}