• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Отзывчивая галерея без скриптов

Разработка Отзывчивая галерея без скриптов

Нет прав для скачивания
Отзывчивая галерея без скриптов.
Пишем код HTML :
HTML:
<div id="gallery">
  <div><img src="https://picsum.photos/600/600/?image=512"/><a href="#lightbox-1">512</a></div>
  <div><img src="https://picsum.photos/600/600/?image=513"/><a href="#lightbox-2">513</a></div>
  <div><img src="https://picsum.photos/600/600/?image=514"/><a href="#lightbox-3">514</a></div>
  <div><img src="https://picsum.photos/600/600/?image=515"/><a href="#lightbox-4">515</a></div>
  <div><img src="https://picsum.photos/600/600/?image=516"/><a href="#lightbox-5">516</a></div>
  <div><img src="https://picsum.photos/600/600/?image=517"/><a href="#lightbox-6">517</a></div>
  <div><img src="https://picsum.photos/600/600/?image=518"/><a href="#lightbox-7">518</a></div>
  <div><img src="https://picsum.photos/600/600/?image=519"/><a href="#lightbox-8">519</a></div>
  <div><img src="https://picsum.photos/600/600/?image=520"/><a href="#lightbox-9">520</a></div>
  <div><img src="https://picsum.photos/600/600/?image=521"/><a href="#lightbox-10">521</a></div>
  <div><img src="https://picsum.photos/600/600/?image=522"/><a href="#lightbox-11">522</a></div>
  <div><img src="https://picsum.photos/600/600/?image=523"/><a href="#lightbox-12">523</a></div>
  <div><img src="https://picsum.photos/600/600/?image=524"/><a href="#lightbox-13">524</a></div>
  <div><img src="https://picsum.photos/600/600/?image=525"/><a href="#lightbox-14">525</a></div>
  <div><img src="https://picsum.photos/600/600/?image=526"/><a href="#lightbox-15">526</a></div>
  <div><img src="https://picsum.photos/600/600/?image=527"/><a href="#lightbox-16">527</a></div>
  <div><img src="https://picsum.photos/600/600/?image=528"/><a href="#lightbox-17">528</a></div>
  <div><img src="https://picsum.photos/600/600/?image=529"/><a href="#lightbox-18">529</a></div>
</div>
<div class="lightbox" id="lightbox-1">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=512"/>
    <div class="title">No. <b>512</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-2">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=513"/>
    <div class="title">No. <b>513</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-3">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=514"/>
    <div class="title">No. <b>514</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-4">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=515"/>
    <div class="title">No. <b>515</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-5">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=516"/>
    <div class="title">No. <b>516</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-6">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=517"/>
    <div class="title">No. <b>517</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-7">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=518"/>
    <div class="title">No. <b>518</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-8">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=519"/>
    <div class="title">No. <b>519</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-9">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=520"/>
    <div class="title">No. <b>520</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-10">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=521"/>
    <div class="title">No. <b>521</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-11">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=522"/>
    <div class="title">No. <b>522</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-12">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=523"/>
    <div class="title">No. <b>523</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-13">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=524"/>
    <div class="title">No. <b>524</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-14">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=525"/>
    <div class="title">No. <b>525</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-15">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=526"/>
    <div class="title">No. <b>526</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-16">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=527"/>
    <div class="title">No. <b>527</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-17">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=528"/>
    <div class="title">No. <b>528</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-18">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=529"/>
    <div class="title">No. <b>529</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
Пишем стиль:
CSS:
* {
  box-sizing: border-box;
}

body {
  margin: 5px;
  position: relative;
}

#gallery {
  display: grid;
  height: calc(100vh - 10px);
  grid-template: repeat(6, 1fr)/repeat(6, 1fr);
  grid-gap: 0.5em;
}
@media (max-width: 800px) {
  #gallery {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  #gallery > div {
    width: 48%;
    margin: 1%;
  }
}
@media (max-width: 800px) and (max-width: 350px) {
  #gallery > div {
    width: 98%;
  }
}

#gallery > div:nth-child(6n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}
#gallery > div:nth-child(2) {
  grid-column: span 3;
  grid-row: span 3;
}
#gallery > div:nth-child(4) {
  grid-column: span 1;
  grid-row: span 2;
}
#gallery > div > a {
  opacity: 0;
  position: absolute;
  color: #000;
  background-color: #000;
  font: bold 4em "Helvetica";
  text-shadow: 0 -1px 5px #fff, -1px 0px 5px #fff, 0 1px 5px #fff, 1px 0px 5px #fff;
  padding: 2rem;
  mix-blend-mode: difference;
  width: 100%;
  height: 100%;
  transition: all ease 1s;
}
#gallery > div > img {
  width: 100%;
  min-height: 100%;
  transition: all ease 1s;
}
#gallery > div:hover img {
  filter: blur(4px);
}
#gallery > div:hover a {
  opacity: 1;
}
#gallery > div {
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
}
#gallery div,
#gallery a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

[id^="lightbox-"] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  opacity: 0;
  transition: opacity 450ms ease-in-out;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
[id^="lightbox-"]:target {
  opacity: 1;
  pointer-events: inherit;
}
[id^="lightbox-"]:target img {
  filter: blur(0);
}
[id^="lightbox-"] .content {
  max-width: 90%;
  position: relative;
  color: #fff;
}
[id^="lightbox-"] .content:hover > a.close {
  opacity: 1;
  transform: scale(1, 1);
}
[id^="lightbox-"] .content:hover > .title {
  opacity: 1;
  transform: translateY(-3px);
}
[id^="lightbox-"] .content:hover > .title::after {
  opacity: 1;
}
[id^="lightbox-"] .content > * {
  transition: all 450ms ease-in-out;
}
[id^="lightbox-"] .title {
  display: block;
  margin: 0;
  padding: 1em;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(50%);
  font-size: 1.5em;
  opacity: 0;
}
[id^="lightbox-"] .title::after {
  content: ' ';
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 350ms ease-in-out 250ms;
  opacity: 0;
  transform-origin: bottom;
  mix-blend-mode: soft-light;
}
[id^="lightbox-"] img {
  max-height: 90vh;
  max-width: 100%;
  margin: 0;
  padding: 0;
  filter: blur(50px);
}
[id^="lightbox-"] a.close {
  width: 2em;
  height: 2em;
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0, 0);
  opacity: 0;
  transform-origin: right top;
  text-decoration: none;
  color: #fff;
}
[id^="lightbox-"] a.close::after {
  content: "X";
}
Смотрим наш результат:
45w15.gif
Автор
baltun
Скачиваний
0
Просмотры
399
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Верх Низ