ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект LightBox CSS для увеличение картинок

Эффект LightBox CSS для увеличение картинок

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

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

Первое изображение вы по размеру самостоятельно ставите, второе идет для просмотра, что произойдет после нажатие на элемент, виде вашей картинки, что изначально будет в небольших размерах.

Эффект увеличение картинки на чистом CSS3

Установка:

Здесь нужно обратить внимание, что у каждого изображение прописан уникальный id в участке id="dog" и в ссылке target="_blank" rel="noopener noreferrer" href="#dog" для того, чтоб поставить несколько вариаций.

HTML

Код

CSS

Код

a.avelaboksan img {
  height: 148px;
  border: 3px solid #eaeaea;
  box-shadow: 0px 0px 8px rgb(0 0 0 / 49%);
  margin: 126px 14px 14px 14px;
}
/* убирает его из поля зрения и добавляет плавный переход */
.augme-navonlas {
position: fixed;
top: -100%;
width: 100%;
background: rgb(27 25 25 / 70%);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
/* Стилизует изображение авелабоксана, центрирует его по вертикали и горизонтали, добавляет переход увеличения и делает его адаптивным, используя комбинацию полей и абсолютного позиционирования */
.augme-navonlas img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Стилизует ссылку закрытия, добавляет слайд вниз */
a.edunobs-kucontes {
  display: block;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  background: #f3f0f0;
  color: #151515;
  text-decoration: none;
  position: absolute;
  top: -80px;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
/* Предоставляет часть символа "X" для исключения изображения из ссылки закрытия. */
a.edunobs-kucontes:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* часть символа "X" для исключения изображения из ссылки закрытия. */
a.edunobs-kucontes:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Uses the :целевой псевдокласс для выполнения анимации при нажатии якоря .augme-navonlas */
.augme-navonlas:target {
opacity: 1;
top: 0;
bottom: 0;
}
.augme-navonlas:target img {
max-height: 100%;
max-width: 100%;
}
.augme-navonlas:target a.edunobs-kucontes {
top: 0px;
}

Плюс этого варианта по увеличению снимков заключается в том, что здесь не нужно не какой библиотеке, а также задействовать скрипт, все работает на чистом стиле CSS3.

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

12 Декабря 2020 Загрузок: 4 Просмотров: 1076 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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