• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Галерея изображений на чистом CSS Grid (Адаптивная Галерея изображений с красивым эффектом)
Галерея изображений на чистом CSS Grid
Kosten
Воскресенье, 18 Апреля 2021 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Если желаете создать на сайте стильную галерею под изображение, так, чтоб еще присутствовали эффекты, такие, как при наведение клика на картинку. То безусловно эта галерея вам должна понравится, так как отлично смотрится, но главное корректно показывает на широком экране или на мобильном гаждет. Это здесь показывает, как можно использовать CSS Grid (с резервным флексбоксом) для создания отзывчивой галереи изображений без медиа-запросов.



HTML

Код
<div class="container">

    <div class="gallery">

  <div class="gallery-item">
   <img class="gallery-image" src="http://zornet.ru/_fr/89/8496556.jpg" alt="">
  </div>

  <div class="gallery-item">
   <img class="gallery-image" src="http://zornet.ru/_fr/89/4224196.jpg" alt="">
  </div>

  <div class="gallery-item">
   <img class="gallery-image" src="http://zornet.ru/_fr/89/3728274.jpg" alt="">
  </div>

  <div class="gallery-item">
   <img class="gallery-image" src="http://zornet.ru/_fr/89/8344670.jpg" alt="">
  </div>

  <div class="gallery-item">
   <img class="gallery-image" src="http://zornet.ru/_fr/89/2834750.jpg" alt="">
  </div>

  <div class="gallery-item">
   <img class="gallery-image" src="http://zornet.ru/_fr/89/7155446.jpg" alt="">
  </div>

    </div>

</div>

CSS

Код
:root {
    /* Base font size */
    font-size: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: #fafafa;
}

.container {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 2rem 2rem;
}

.heading span {
    display: block;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem -1rem;
}

.gallery-item {
    flex: 1 0 24rem;
    margin: 1rem;
    box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease-out;
}

.gallery-image:hover {
    transform: scale(1.15);
}

/*


*/

@supports (display: grid) {
    .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  grid-gap: 2rem;
    }

    .gallery,
    .gallery-item {
  margin: 0;
    }
}

Установка завершена.

Демонстрация
Прикрепления: 7305470.png (477.7 Kb) · image-gallery.zip (3.8 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Галерея изображений на чистом CSS Grid (Адаптивная Галерея изображений с красивым эффектом)
  • Страница 1 из 1
  • 1
Поиск: