« Простой лайтбокс ( Lightbox ) с использованием CSS и HTML »

Описание материала:

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

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

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

HTML код:

Код

<a href="#img">
<img src="http://ufive.ru/demo_file/img_demo/ufive_0.jpg" class="u5-img">
</a>

<a href="#_" class="u5-lb" id="img">
<img src="http://ufive.ru/demo_file/img_demo/ufive_0.jpg">
</a>

<p class="site">uFive.Ru</p>

CSS код:

Код

@import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2&display=swap");

.u5-img {
  max-width: 40%;
  border: 3px solid #f3be81;
  border-radius: 15px;
  -webkit-border-radius: 15x;
  -moz-border-radius: 15px;
}
.site {
  font-style: bold;
  font-family: "Baloo Paaji 2", cursive;
  font-size: 20px;
  color: #f3be81;
}
.u5-lb {
  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);
}
.u5-lb img {
  max-width: 90%;
  max-height: 90%;
  margin-top: 2%;
  border: 3px solid #f3be81;
}
.u5-lb:target {
  outline: none;
  display: block;
}
@media (max-width: 765px) {
  .u5-img {
  max-width: 95%;
  }
  .u5-lb img {
  margin-top: 50%;
  }
}

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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: YaVi | Категория: Меню и навигация | Просмотров: 685

Теги к материалу: html, Lightbox, css, с использованием CSS, Простой, лайтбокс

Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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