Result
画像の上に要素を重ねてdisplay:grid;でグリッドと枠線を作り中を空にすればタイル画のようなものが作れます
枠線はすき間をgrid-gapで作り、background: white;で白い枠線を表現します。
その際、画像部分に影響が出るので子要素にbackgroundを設定し、mix-blend-mode:lighten;で画像が表示されるようになっています。
設定適当なのでモニタサイズ次第ではズレると思います。親の高さを決める等、便宜調整下さい
css
section article {
position: absolute;
top: 0;
width: 100%;
background: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
mix-blend-mode: lighten;
}
section div {
background: black;
height: 25.3vw;
}
section div:nth-of-type(2) {
grid-column: 2 / 4;
}
|
html
<section>
<img src="https://picsum.photos/1600/1100">
<article>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</article>
</section>
|
can i use
via
Image Mosaic Effect with CSS Grids & Blend Modes
