HTML CSS: Как сделать изображение маленьким, как крупный значок, чтобы после нажатия оно появлялось в обычном размере

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

В этой статье мы рассмотрим, как можно реализовать такое поведение на веб-странице с помощью HTML и CSS.

Шаг 1: Создание маленького значка

Первым шагом будет создание маленького изображения, которое будет выступать в качестве значка. Для этого мы будем использовать элемент img в HTML и определить соответствующий класс для стилизации с помощью CSS.

<img src="small-image.jpg" alt="Маленькое изображение" class="thumbnail">

.thumbnail {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}

В коде выше мы задали размеры окна изображения (width и height) и границу с цветом (border) для класса .thumbnail. Изображение с этим классом будет выглядеть как маленький значок с границей.

Шаг 2: Создание модального окна

Чтобы показать изображение в увеличенном размере при нажатии на значок, мы создадим модальное окно. Для этого нам понадобится HTML код, который представляет блок, в котором будет отображаться увеличенное изображение.

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img src="large-image.jpg" alt="Увеличенное изображение" class="modal-content">
</div>

Мы создали блок с идентификатором myModal и классом modal. Внутри этого блока разместили изображение с классом modal-content, которое будет отображаться в увеличенном размере. Также добавили элемент span с классом close, чтобы иметь возможность закрыть модальное окно.

Шаг 3: Стилизация модального окна

Для стилизации модального окна добавим CSS правила для классов .modal и .modal-content:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.9;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 800px;
  max-height: 80%;
}

.close {
  color: #fff;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

В коде выше мы определили размеры и позиционирование модального окна и его содержимого. Также добавили элемент span с классом close, чтобы можно было закрыть модальное окно с помощью кнопки-крестика.

Шаг 4: JavaScript для открытия и закрытия модального окна

Наконец, добавим JavaScript код для открытия и закрытия модального окна при нажатии на значок и кнопку-крестик.

var modal = document.getElementById("myModal");
var thumbnail = document.getElementsByClassName("thumbnail")[0];
var close = document.getElementsByClassName("close")[0];

thumbnail.onclick = function() {
  modal.style.display = "block";
}

close.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Здесь мы получаем ссылки на модальное окно, маленький значок и кнопку-крестик с помощью метода getElementById для идентификаторов и getElementsByClassName для классов. Затем мы задаем обработчики событий onclick для открытия и закрытия модального окна.

Заключение

Теперь у вас есть полный набор инструкций для создания маленького значка изображения на веб-странице, которое будет увеличиваться при нажатии. Вам остается только заменить ссылки на изображения в коде для соответствующих файлов на вашем сервере.

Вы также можете дополнить этот функционал дополнительными возможностями, например, добавив анимацию появления и исчезновения модального окна. Все зависит от вашей фантазии и потребностей вашего проекта. Удачи!