ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивный Lightbox для увеличения картинок

Адаптивный Lightbox для увеличения картинок

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

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

Пример: давайте предположим, что размер изображения идет 850 на 850 пикселей. Где можем разместить этот снимок на сайте с его фактическим размером. Таким образом, мы можем выставить картинку с небольшим размером, то тогда размер и качество безусловно уменьшатся. Но при задействовании лайтбокса, вы нажмете на снимок небольшого размера, где при появлении окно появиться изображения реального размера.

После установочного процесса:

Мобильная версия:

Создания адаптивного лайтбокс на чистом CSS3

Установка:

HTML

Код

CSS

Код

.dilation {
  max-height: 171px;
  border: solid 6px white;
}
.enlargement {
  position: fixed;
  z-index: 999;
  height: 0;
  width: 0;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.enlargement img {
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
  opacity: 0;
}
.enlargement:target {
  outline: none;

  width: 100%;
  height: 100%;
  opacity: 1 !important;

}
.enlargement:target img {
  border: solid 8px #f7f3f3;
  opacity: 1;
  transition: opacity 0.7s;
  box-shadow: 0px 0px 1px 1px #8a8484;
  border-radius: 3px;
  webkit-transition: opacity 0.6s;
}
.gakuson-extesion {
  color: #efefef;
  background-color: #252323;
  border: solid 2px #f3f0f0;
  padding: 6px 18px;
  text-shadow: 0 1px 0 #212020;
  border-radius: 1px;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
  position: absolute;
  top: 45%;
  z-index: 99;
  border-radius: 3px;
}
.gakuson-extesion:hover {
  background-color: #282a31;
}
.onward {
  left: 7%;
}
.astern {
  right: 7%;
}
.completion {
  position: absolute;
  right: 2%;
  top: 2%;
  color: #f7f1f1;
  background-color: #e01212;
  border: solid 3px #f3efef;
  padding: 8px 14px;
  border-radius: 100px;
  text-decoration: none;
}
.completion:hover {
  background-color: #a00d0d;
}

В основном все увеличение картинок выстроен при помощи JavaScript, JQuery или любой другой библиотеке. Но в этом материале вам представлено оригинальное решение, как можно воплотить, в плане создание Image Lightbox с помощью CSS, где не будет задействован JavaScript. Где по сути это решение не сложное, а точнее проста и понятна, как для начинающих, так и для продвинутого веб разработчика.

Демонстрация

Также вашему вниманию видео обзор:

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

16 Июня 2020 Загрузок: 3 Просмотров: 1240 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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