<!-- CSS Grid -->
<section class="css-grid">
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/o8C6UFpqC4s/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/CBOnLA41Tto/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/8mqOw4DBBSg/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/UW_gRafMxE0/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/NIBKggQ-bVM/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Ws92xzbSris/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/_7ijJz9nZmY/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/SxiWUpGLaZM/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/9SW9IvKD9OY/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/W5XTTLpk1-I/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/c0ViYpsmUrg/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/ucYWe5mzTMU/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/_3l5B_4E_u0/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/PaFUKopuirM/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/TEvrd6ajvrY/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/cUGa_uRs9AE/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/KSLUQ2-equ0/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/wkU2vEIpukA/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Ri4BxJLZ1Dk/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/mP6ZKokr7Rw/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/i2ex6BUcK1c/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/VxUEI9fOZSs/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Qymo-vdiwK4/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Z-Y6I45f9kQ/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/ym96FAhQ8o4/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/aeURop_aIfw/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/VuPIUePS_vU/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/hsS6jTr-pns/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/pQ7GIGO6esE/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/-xOHLRUW4k8/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/bmS3th_-BIg/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Lpqg7ypu2B4/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/MpT5DPQIOH8/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/4cgzBvQgdMc/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/6Wad1bIYQ94/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/tK67jI9G398/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/46Sg95vwWdM/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/sZnRKLItmwo/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/KvTOwKoji7g/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/rBWfxlNJ9Rk/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/4BN81q7DXvs/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/co4UlJ5q9WU/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/awbWc1K-BCc/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/YJxAy2p_ZJ4/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/KsdgjODuJQE/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/tMvuB9se2uQ/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/nWkMhTo8Wa4/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Pi7R19E3_QQ/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/kIE6mAtDTsI/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/-KLKu_pruJ4/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/RD_9ss_n2Y0/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/6tedMQIJpNI/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/xmGkzY--Fgg/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/-5rA4DRrEXU/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/HnWlli4ZZRI/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/HALe2SmkWAI/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/KvTOwKoji7g/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/gYbHzsGhfuQ/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/suaBxarUnyo/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/BgrJ7KBikgU/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/QlsQbLXVpuU/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/xFTNsGW1isI/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/Jf5vFuEwIYA/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/HnUHOBuJ7s4/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/w5Z_lEWYirI/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/pPA5ActWLLI/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/TEYrLTKKMSg/900x900');"></figure>
</a>
</article>
<article>
<a class="css-grid__link" href="#">
<figure class="absolute-bg" style="background-image: url('https://source.unsplash.com/rC29LgEbTjU/900x900');"></figure>
</a>
</article>
</section>
//
// Variables / Config
//
$mq-xsmall: 640px;
$mq-small: 768px;
$mq-med: 1024px;
$mq-large: 1440px;
$mq-xlarge: 1840px;
//
// Base
//
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
height: 100%;
width: 100%;
}
//
// Media
//
figure {
margin: 0;
}
.absolute-bg {
position: absolute;
top: 0;
left: 0;
z-index: 0;
height: 100%;
width: 100%;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transition: transform 300ms ease;
}
//
// Components
//
.css-grid {
display: block;
&:after {
content: "";
display: table;
clear: both;
}
@supports (display: grid) {
display: grid;
grid-auto-flow: row dense;
grid-template-columns: 1fr;
width: 100%;
&:after {
content: none;
}
@media (min-width: $mq-xsmall) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $mq-med) {
grid-template-columns: repeat(4, 1fr);
}
@media (min-width: $mq-xlarge) {
grid-template-columns: repeat(5, 1fr);
}
}
& > article {
float: left;
width: 100%;
@media (min-width: $mq-xsmall) {
width: 50%;
}
@media (min-width: $mq-xsmall) and (max-width: ($mq-small - 1px)) {
&:nth-child(17n + 1) {
width: 100%;
}
}
@media (min-width: $mq-med) {
width: 25%;
&:nth-child(34n + 1) {
width: 50%;
}
}
@media (min-width: $mq-med) and (max-width: ($mq-xlarge - 1px)) {
&:nth-child(34n + 20) {
float: right;
width: 50%;
}
}
@media (min-width: $mq-xlarge) {
width: 20%;
&:nth-child(34n + 1) {
width: 40%;
}
&:nth-child(34n + 21) {
float: right;
width: 40%;
}
}
@supports (display: grid) {
float: none;
width: auto;
@media (min-width: $mq-xsmall) and (max-width: ($mq-small - 1px)) {
&:nth-child(17n + 1) {
grid-column-end: span 2;
grid-row-end: span 2;
}
}
@media (min-width: $mq-med) {
&:nth-child(34n + 1) {
grid-column-end: span 2;
grid-row-end: span 2;
width: auto;
}
}
@media (min-width: $mq-med) and (max-width: ($mq-xlarge - 1px)) {
&:nth-child(34n + 20) {
grid-column-end: span 2;
grid-row-end: span 2;
width: auto;
}
}
@media (min-width: $mq-xlarge) {
&:nth-child(34n + 1) {
width: auto;
}
&:nth-child(34n + 21) {
grid-column-end: span 2;
grid-row-end: span 2;
width: auto;
}
}
}
}
&__link {
position: relative;
display: block;
overflow: hidden;
&:before,
&:after {
content: "";
}
&:before {
display: block;
padding-top: 100%;
}
&:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #080808;
opacity: 0;
transition: opacity 300ms ease;
}
&:hover {
&:after {
opacity: 0.3;
}
.absolute-bg {
transform: scale(1.1);
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.