.container
each val in ['https://images.unsplash.com/photo-1543589077-870d0ba0a43d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTM4MDB8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1639377045919-2989217a0f04?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQxMTJ8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1481271134264-c373cb29cf60?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQwMTV8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1729670552768-8ec0bdb864e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQxMTJ8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1512122799605-7c989cb6b5ea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQwNzV8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1543772857-a9d7ebc0cf63?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQyNzh8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1547275870-de097f0cea8f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQzMTZ8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1701943523477-7b0b0342d9a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQwNzV8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1545940982-e7c122eba937?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQxMTJ8&ixlib=rb-4.1.0&q=80&w=400', 'https://images.unsplash.com/photo-1735513703744-8c32ba4ee111?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyOTQzNzh8&ixlib=rb-4.1.0&q=80&w=400']
.box
img(src=val, alt="")
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
@mixin flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
*, *:after {
box-sizing: border-box;
}
html {
font-size: 100vmax / 1600 * 100;
@media (max-width: 992px) {
font-size: 60px;
}
}
body {
min-height: 100vh;
@include flexCenter;
background: #c4d8c4 radial-gradient(circle, #fff 1px, transparent 0) repeat center / 30px 30px;
font-size: 0.3rem;
font-family: "Bricolage Grotesque", sans-serif;
font-weight: bold;
}
.container {
width: 9rem;
margin: 0.5rem;
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.box {
width: 100%;
aspect-ratio: calc(1 * sqrt(3) / 2);
position: relative;
overflow: hidden;
box-shadow: 2px 2px 12px #0005;
transition: all 0.3s;
// hexagon
border-radius: 50% / 25%;
corner-shape: bevel;
// beehive layout
margin-top: -25%;
&:nth-child(1),
&:nth-child(8) {
grid-column: 2 / 3;
}
&:nth-child(-n+3),
&:nth-child(n+8):nth-child(-n+10) {
margin-left: -50%;
}
// deco line
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
inset: 0;
margin: auto;
border-radius: inherit;
corner-shape: inherit;
border: 1px solid #fff;
scale: 0.9;
opacity: 0.5;
pointer-events: none;
transition: all 0.3s;
will-change: scale;
}
&:hover {
img {
scale: 1.1;
filter: none;
}
&:after {
scale: 1.2; // disappear
}
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
transition: all ease 0.3s;
filter: grayscale(0.3);
will-change: scale, filter;
}
}
