I adapted this wonderful photo layout. I wanted to implemented a max height and make it scrollable. Then, I wanted to set scroll bars to always visible to indicate that there is content to scroll. This got more complicated then I imagined since turns out the scroll bars are overwritten by browsers and OS's.
Afterwards, I decided I will implement scroll shadows. Found this nice website and copied the class. Here is the HTML and CSS.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
figcaption {
text-align: center;
}
figure.gallery ul {
border: 1px red solid;
max-width: 80%;
height: 50vh;
margin: 0 auto;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
gap: 0.2em;
list-style-type: none;
}
figure.gallery ul li {
height: 40vh;
flex-grow: 1;
}
figure.gallery ul li:last-child {
flex-grow: 10;
}
figure.gallery ul li img {
max-height: 100%;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
}
@media (max-aspect-ratio: 1/1) {
figure.gallery ul li {
height: 30vh;
}
}
// Short screens
@media (max-height: 480px) {
figure.gallery ul li {
height: 80vh;
}
}
// Smaller screens in portrait
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
figure.gallery ul {
flex-direction: row;
}
figure.gallery ul li {
height: auto;
width: 100%;
}
figure.gallery ul li img {
width: 100%;
max-height: 75vh;
min-width: 0;
}
}
.scrollGradient {
background:
linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%,
radial-gradient(farthest-side at 50% 0, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 50% 100%, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)) 0 100%;
background-color: #ffffff;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
background-size: 100% 45px, 100% 45px, 100% 15px, 100% 15px;
}<header>
<h1>Gallery</h1>
</header>
<figure class="gallery">
<ul class="scrollGradient">
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg"
alt="A Toyota Previa covered in graffiti"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg"
alt="Interesting living room light through a window"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg"
alt="Sara on a red bike"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg"
alt="XOXO venue in between talks"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg"
alt="Trees lit by green light during dusk"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg"
alt="Portrait of Justin Pervorse"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg"
alt="Empty bike racks outside a hotel"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg"
alt="Heavy rain on an intersection"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg"
alt="Payam Rajabi eating peanut chicken"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg"
alt="Portland skyline sunset"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg"
alt="Interior at Nong's"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05501_yirmq8.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05501_yirmq8.jpg"
alt="A kimchi hotdog on a plate"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05624_f5b2ud.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05624_f5b2ud.jpg"
alt="Restaurant window with graffiti saying 'water'"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05623_dcpfva.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05623_dcpfva.jpg"
alt="Portrait of Jeremy Tanner"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05515_d2gzut.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05515_d2gzut.jpg"
alt="Jordan, Sarah and Sara on red bikes, waiting"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05581_ceocwv.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05581_ceocwv.jpg"
alt="Barista wearing a hoodie saying 'Coffee Should Be Dope.'"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05517_ni2k0p.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05517_ni2k0p.jpg"
alt="Payam crossing the street on a bike"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05620_qfwycq.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05620_qfwycq.jpg"
alt="Lit trees reflected in a puddle"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05462_b33uvp.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05462_b33uvp.jpg"
alt="Moody chair in my hotel room"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05489_mqzktl.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05489_mqzktl.jpg"
alt="Tom and Jenn wearing sunglasses"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05476_dlkjza.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05476_dlkjza.jpg"
alt="Jordan and Sarah in front of a restaurant window"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05497_abbd3c.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05497_abbd3c.jpg"
alt="Sarah reading the Double Dragon drink menu"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05487_fcdv7t.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05487_fcdv7t.jpg"
alt="Beer brewing equipment"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05493_q6njbk.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05493_q6njbk.jpg"
alt="2 cocktails in the making"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05446_xj60ff.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05446_xj60ff.jpg"
alt="Beverage fridge at Nong's"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05559_hu49zx.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05559_hu49zx.jpg"
alt="Wood structure reflections"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05482_dtrj02.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05482_dtrj02.jpg"
alt="Colorful garden equipment in a shop window"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05565_dx5rp6.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05565_dx5rp6.jpg"
alt="Sarah in front of a wooden wall"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05613_o9af2z.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05613_o9af2z.jpg"
alt="A neon banana"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05469_fdxdzx.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05469_fdxdzx.jpg"
alt="Matt Sacks smiling while we're waiting for food"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05558_yq2tnz.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05558_yq2tnz.jpg"
alt="A fixed-gear bike under some bright lights"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05483_dyiuya.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05483_dyiuya.jpg"
alt="Panic's PlayDate being held by a tester"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05468_xzbtcd.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05468_xzbtcd.jpg"
alt="Window reflection of me and Payam"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05457_nloycw.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05457_nloycw.jpg"
alt="Upside down shopping carts"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05522_mekpec.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05522_mekpec.jpg"
alt="Payam riding a bike with no hands"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05611_lbwtmk.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05611_lbwtmk.jpg"
alt="A kid's pillow left on the bench of a bus stop"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05572_xfvij7.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05572_xfvij7.jpg"
alt="My reflection in the mirror"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05481_gnljae.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05481_gnljae.jpg"
alt="Jordan holding an iced coffee against his head to cool down"
loading="lazy"
/>
</a>
</li>
<li>
<a
target="_blank"
href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05480_zkw8sm.jpg"
>
<img
src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05480_zkw8sm.jpg"
alt="Jordan and Sarah looking at the menu in a coffee shop"
loading="lazy"
/>
</a>
</li>
<!-- Adding an empty <li> here so the final photo doesn't stretch like crazy. Try removing it and see what happens! -->
<li></li>
</ul>
<figcaption>Gallery</figcaption>
</figure>The issue is the shadows are drawn under the images.
Honestly, I am just looking for a minimal CSS-HTML only way to indicate that the gallery maybe scrollable. This is the closest I have gotten. Is there a way to draw the gradients on top of the images?
With this scroll shadow approach, it works based on the text being in front of the shadow background elements. The technique is dependent upon the background-attachment property, which has to be applied to a background element in a scroll container.
Unlike text, the images in your scroll container fully obscure the shadows behind them.
One way to work around this is to use mix-blend-mode: multiply. The images remain on top, but blend with the content of the element's parent and the element's background.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
figcaption {
text-align: center;
}
figure.gallery ul {
border: 1px red solid;
max-width: 80%;
height: 50vh;
margin: 0 auto;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
gap: 0.2em;
list-style-type: none;
}
figure.gallery ul li {
height: 40vh;
flex-grow: 1;
}
figure.gallery ul li:last-child {
flex-grow: 10;
}
figure.gallery ul li img {
max-height: 100%;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
/* add this line */
mix-blend-mode: multiply;
}
@media (max-aspect-ratio: 1/1) {
figure.gallery ul li {
height: 30vh;
}
}
// Short screens
@media (max-height: 480px) {
figure.gallery ul li {
height: 80vh;
}
}
// Smaller screens in portrait
@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
figure.gallery ul {
flex-direction: row;
}
figure.gallery ul li {
height: auto;
width: 100%;
}
figure.gallery ul li img {
width: 100%;
max-height: 75vh;
min-width: 0;
}
}
.scrollGradient {
background:
linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%,
radial-gradient(farthest-side at 50% 0, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 50% 100%, rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0)) 0 100%;
background-color: #ffffff;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
background-size: 100% 45px, 100% 45px, 100% 15px, 100% 15px;
}<header>
<h1>Gallery</h1>
</header>
<figure class="gallery">
<ul class="scrollGradient">
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05466_kwlv0n.jpg" alt="A Toyota Previa covered in graffiti" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05621_zgtcco.jpg" alt="Interesting living room light through a window" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05513_gfbiwi.jpg" alt="Sara on a red bike" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05588_nb0dma.jpg" alt="XOXO venue in between talks" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05459_ziuomy.jpg" alt="Trees lit by green light during dusk" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05586_oj8jfo.jpg" alt="Portrait of Justin Pervorse" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05465_dtkwef.jpg" alt="Empty bike racks outside a hotel" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05626_ytsf3j.jpg" alt="Heavy rain on an intersection" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05449_l9kukz.jpg" alt="Payam Rajabi eating peanut chicken" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05544_aczrb9.jpg" alt="Portland skyline sunset" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814785/photostream-photos/DSC05447_mvffor.jpg" alt="Interior at Nong's" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05501_yirmq8.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05501_yirmq8.jpg" alt="A kimchi hotdog on a plate" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05624_f5b2ud.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05624_f5b2ud.jpg" alt="Restaurant window with graffiti saying 'water'" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05623_dcpfva.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05623_dcpfva.jpg" alt="Portrait of Jeremy Tanner" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05515_d2gzut.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05515_d2gzut.jpg" alt="Jordan, Sarah and Sara on red bikes, waiting" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05581_ceocwv.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05581_ceocwv.jpg" alt="Barista wearing a hoodie saying 'Coffee Should Be Dope.'" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05517_ni2k0p.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814784/photostream-photos/DSC05517_ni2k0p.jpg" alt="Payam crossing the street on a bike" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05620_qfwycq.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05620_qfwycq.jpg" alt="Lit trees reflected in a puddle" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05462_b33uvp.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05462_b33uvp.jpg" alt="Moody chair in my hotel room" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05489_mqzktl.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05489_mqzktl.jpg" alt="Tom and Jenn wearing sunglasses" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05476_dlkjza.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05476_dlkjza.jpg" alt="Jordan and Sarah in front of a restaurant window" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05497_abbd3c.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814783/photostream-photos/DSC05497_abbd3c.jpg" alt="Sarah reading the Double Dragon drink menu" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05487_fcdv7t.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05487_fcdv7t.jpg" alt="Beer brewing equipment" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05493_q6njbk.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05493_q6njbk.jpg" alt="2 cocktails in the making" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05446_xj60ff.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05446_xj60ff.jpg" alt="Beverage fridge at Nong's" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05559_hu49zx.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05559_hu49zx.jpg" alt="Wood structure reflections" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05482_dtrj02.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05482_dtrj02.jpg" alt="Colorful garden equipment in a shop window" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05565_dx5rp6.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05565_dx5rp6.jpg" alt="Sarah in front of a wooden wall" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05613_o9af2z.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05613_o9af2z.jpg" alt="A neon banana" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05469_fdxdzx.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05469_fdxdzx.jpg" alt="Matt Sacks smiling while we're waiting for food" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05558_yq2tnz.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814782/photostream-photos/DSC05558_yq2tnz.jpg" alt="A fixed-gear bike under some bright lights" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05483_dyiuya.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05483_dyiuya.jpg" alt="Panic's PlayDate being held by a tester" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05468_xzbtcd.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05468_xzbtcd.jpg" alt="Window reflection of me and Payam" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05457_nloycw.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05457_nloycw.jpg" alt="Upside down shopping carts" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05522_mekpec.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05522_mekpec.jpg" alt="Payam riding a bike with no hands" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05611_lbwtmk.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05611_lbwtmk.jpg" alt="A kid's pillow left on the bench of a bus stop" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05572_xfvij7.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05572_xfvij7.jpg" alt="My reflection in the mirror" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05481_gnljae.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05481_gnljae.jpg" alt="Jordan holding an iced coffee against his head to cool down" loading="lazy" />
</a>
</li>
<li>
<a target="_blank" href="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05480_zkw8sm.jpg">
<img src="https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1568814781/photostream-photos/DSC05480_zkw8sm.jpg" alt="Jordan and Sarah looking at the menu in a coffee shop" loading="lazy" />
</a>
</li>
<!-- Adding an empty <li> here so the final photo doesn't stretch like crazy. Try removing it and see what happens! -->
<li></li>
</ul>
<figcaption>Gallery</figcaption>
</figure>