ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой Lightbox вывода изображений на CSS

Простой Lightbox вывода изображений на CSS

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

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

Простой Lightbox для увеличения картинок на CSS

Установка:

HTML

Код

CSS

Код

.kadokusan-img {
  max-width: 40%;
  border: 3px solid #a1a1a7;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
.amilas {
  font-style: bold;
  font-family: "Baloo Paaji 2", cursive;
  font-size: 20px;
  color: #f3be81;
}
.kolsvamuges {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}
.kolsvamuges img {
  max-width: 90%;
  max-height: 90%;
  margin-top: 2%;
  border: 3px solid #93959a;
}
.kolsvamuges:target {
  outline: none;
  display: block;
}
@media (max-width: 765px) {
  .kadokusan-img {
  max-width: 95%;
  }
  .kolsvamuges img {
  margin-top: 50%;
  }
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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