• Для скачивания ресурсов Форума пользователь должен написать не менее 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
Просмотры
293
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

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

  • Font Awesome Manager
    Font Awesome Manager
    Позволяет использовать только шрифты которые необходимы XenForo.
  • [OzzModz] Badges
    [OzzModz] Badges
    покажите всем что пользователь онлайн или оффлайн выставив этот статус на полэкрана в постбит.
  • [Liam W.] Conversation Folders
    [Liam W.] Conversation Folders
    Папки для переписок.
  • s9e Media Sites
    s9e Media Sites
    Пак BB-кодов для вставки медиа контента.
  • Watermarker
    Бета Watermarker
    Водяные знаки для изображений.
Верх Низ