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

Галерея изображений в ромбик на CSS

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

Безусловно по форме можно много проектировать, это все зависит от самого вебмастера, где и в какой форме он хочет наблюдать изображение. Так как при редакции css-свойство margin-bottom появляется возможность корректировать фигуры. Если рассматривать материал, который здесь идет, то он реализован при помощи css-свойствах grid и clip-path. Что немного знаний в CSS не помешает красиво оформить основной стенд, где будут находиться все картинки под увеличение.

Если ставить на светлый фон, то примерно так подучится, так как мы заранее создали отступ, который уже в стилистике задан, не думаю, что большой будет как – то отделятся, возможно кто-то вообще его не предпочтет, а точнее уберет, и все же смотрится по своему уникально

Замечательная галерея с миниатюрами с прокруткой

Установка:

HTML

Код

CSS

Код

.gelereya-kartinok {
  margin: auto;
  max-width: 785px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 1vmin;
}
.gelereya-kartinok a {
  grid-column: span 2;
  z-index: 1;
  position: relative;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  margin-bottom: -52%;
  transform: scale(1);
  transition: all .25s;
}
.gelereya-kartinok a:nth-child(7n + 1) {
  grid-column: 2 / span 2;
}
.gelereya-kartinok a:hover {
  z-index: 2;
  transform: scale(1.6);
}
.gelereya-kartinok img {
  max-width: 100%;
}

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

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

Код

.gelereya-kartinok a:hover {
z-index: 2;
transform: scale(1.6);
}

на

Код

.gelereya-kartinok a:hover {
  z-index: 2;
  transform: scale(1.2);
  clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
}

После чего сетка для галереи не потеряет информативность по дизайну, а только картинки станут показывать свой реальный размер, где: то будет идти большая, а где-то не так сильно широкая. Это сделано для того, чтоб можно разместит к примеру обои рабочего стола, что нужно рассматривать в большом обзоре.

Но вот аватарки можно задать один на всех размер, но только в том положение, если они по своим размерам идут в разнобой, что можно посмотреть на demo странице, которая прописана ниже.

PS - при проверке на работоспособность по эффектам, то оказалось, что изображение нужны все под один размер, то не получится рисунка, виде соты, что также в стилях в самом верху нужно задавать под каждую ширину, чтоб корректно смотрелось.

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

Демонстрация
Источник: atuin.ru

18 Декабря 2019 Загрузок: 2 Просмотров: 2425 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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