<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Hive Photo Gallery Grid</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- number of rows and minimum number of columns, you can adjust as you please-->
<!-- image urls, you can replace with your own-->
<body style="--n-rows: 3; --n-cols: 6;">
<style>.hex-cell:nth-of-type(5n + 1) { grid-column-start: 2 }</style>
<div class="hex-cell"><img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=650&fm=jpg"/></div>
<div class="hex-cell"><img src="https://images.unsplash.com/photo-1497733942558-e74c87ef89db?w=650&fm=jpg"/></div>
<div class="hex-cell"><img src="https://images.unsplash.com/photo-1540744276164-9dc898353c7b?w=650&fm=jpg"/></div>
<div class="hex-cell"><img src="https://images.unsplash.com/photo-1469975692758-66d107a536cb?w=650&fm=jpg"/></div>
<div class="hex-cell"><img src="https://images.unsplash.com/photo-1490845060161-85f9ce08a9f4?w=650&fm=jpg"/></div>
<div class="hex-cell"><img src="https://images.unsplash.com/photo-1541673504494-8bcc1a340180?w=650&fm=jpg"/></div>
<div class="hex-cell"><img src="https://images.unsplash.com/photo-1515937350506-3e7b51a95339?w=650&fm=jpg"/></div>
</body>
<!-- partial -->
</body>
</html>
body {
--l: calc(100vw/var(--n-cols));
--hl: calc(.5*var(--l));
--ri: calc(.5*1.73205*var(--l));
box-sizing: border-box;
display: grid;
place-content: center;
grid-template: repeat(var(--n-rows), var(--l))/repeat(var(--n-cols), var(--ri));
grid-gap: var(--hl) 0;
overflow: hidden;
margin: 0;
padding: var(--hl) 0;
height: 100vh;
background: #262626;
filter: drop-shadow(2px 2px 5px);
}
@media (orientation: landscape) {
body {
--l: calc(100vh/(var(--n-rows) + 3));
}
}
.hex-cell {
overflow: hidden;
grid-column-end: span 2;
margin: calc(-1*var(--hl)) 0;
transform: scale(0.95);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
img {
--hl: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(calc(1 + .2*var(--hl)));
filter: brightness(calc(.6*(1 + var(--hl))));
transition: .7s;
}
img:hover {
--hl: 1;
}