<div class="wrapper">
<nav class="lil-nav">
<a href="#image-1">
<img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="Yosemite" />
</a>
<a href="#image-2">
<img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="Houses" />
</a>
<a href="#image-3">
<img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="Galaxies" />
</a>
<a href="#image-4">
<img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="Motel" />
</a>
<a href="#image-5">
<img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="Minimalist nightmare" />
</a>
<a href="#image-6">
<img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/jakob-owens-EkxOtUljwhs-unsplash.jpg" alt="Hoops" />
</a>
<a href="#image-7">
<img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/tim-bogdanov-4uojMEdcwI8-unsplash.jpg" alt="Gentleman" />
</a>
<a href="#image-8">
<img class="lil-nav__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/weston-mackinnon-caUtk0DTiR0-unsplash.jpg" alt="Stuff" />
</a>
</nav>
<div class="gallery">
<img class="gallery__img" id="image-1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/kenan-sulayman-FV3M7igu8Fs-unsplash.jpg" alt="Yosemite" />
<img class="gallery__img" id="image-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/anastasia-dulgier-NCFTGtjY3EQ-unsplash.jpg" alt="Houses" />
<img class="gallery__img" id="image-3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/arnaud-mariat-IPXcUYHeErc-unsplash.jpg" alt="Galaxies" />
<img class="gallery__img" id="image-4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/matthew-smith-9CV6WrxxdrM-unsplash.jpg" alt="Motel" />
<img class="gallery__img" id="image-5" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/vladimir-kondriianenko-bxwzcFy9YwM-unsplash.jpg" alt="Minimalist nightmare" />
<img class="gallery__img" id="image-6" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/jakob-owens-EkxOtUljwhs-unsplash.jpg" alt="Hoops" />
<img class="gallery__img" id="image-7" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/tim-bogdanov-4uojMEdcwI8-unsplash.jpg" alt="Gentleman" />
<img class="gallery__img" id="image-8" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/weston-mackinnon-caUtk0DTiR0-unsplash.jpg" alt="Stuff" />
</div>
</div>
$large: 1200px;
img {
display: block;
max-width: 100%;
}
.wrapper {
overflow: hidden;
height: 100vh;
display: grid;
grid-template-rows: 2fr 1fr;
grid-gap: 10px;
@media screen and (min-width: $large) {
grid-template-columns: 1fr 5fr;
grid-template-rows: auto;
}
}
.gallery {
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
display: flex;
@media screen and (min-width: $large) {
display: block;
overflow-y: scroll;
overflow-x: hidden;
scroll-snap-type: y mandatory;
}
}
.gallery__img {
scroll-snap-align: start;
margin-bottom: 10px;
min-width: 100vw;
object-fit: cover;
@media screen and (min-width: $large) {
min-width: auto;
min-height: 100vh;
}
}
.lil-nav {
overflow-x: scroll;
overflow-y: hidden;
display: flex;
grid-row-start: 2;
@media screen and (min-width: $large) {
overflow-y: scroll;
overflow-x: hidden;
display: block;
grid-row-start: auto;
}
a {
display: flex;
min-width: 45vw;
margin-right: 10px;
@media screen and (min-width: $large) {
margin-bottom: 10px;
min-height: 200px;
min-width: 100%;
}
}
}
.lil-nav__img {
object-fit: cover;
filter: saturate(0);
transition: 0.3s ease all;
&:hover {
transform: scale(1.05);
filter: saturate(1);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.