Creating a Dynamic Photo-Grid with CSS Blend Modes

Bailey Latimer
Feb 25 · 4 min read
Image for post
Image for post

“Don’t major in the minors”— Jim Rohn

Life is short. If you find yourself doing the same repetitive tasks over and over again, find a better way. When design meets automation, it’s a beautiful thing.

Those 10 precious seconds you spent waiting for Photoshop to open could have been spent doing something more productive.

Helping a smart company become smarter

Crown Equipment combines smart software and tough hardware to revolutionize how forklifts are made. I helped the Crown Design team automate the way the upload photos to their staff screen.

Image for post
Image for post
TLDR; The non-destructive editing flow

Staff Screen

Crown wanted the site to help recruit top talent. Each team member’s photo is featured on the staff screen, giving potential recruits an idea of who they’ll work with.

However, there was a problem. The photo uploading process was tedious and unsustainable.

Image for post
Image for post

Static images = Zero flexibility

Each photo is colored orange, teal, or beige. They are manually organized to keep matching colors from touching.

Image for post
Image for post

Originally, each image was colored in Photoshop. This means an employee was stuck with their color until a new image was uploaded. When an employee left, colors touched and the pattern failed.

  1. Employee #2 leaves 🚶‍♂️
  2. Pattern fails 💀
Image for post
Image for post

The pattern broke whenever someone left or a new employee was hired. To fix the pattern, we had to:

  1. Remove existing image
  2. Colorize new image in Photoshop
  3. Upload new colorized image to site
  4. Rearrange images so colors don’t touch

After doing this a few times, I thought to myself:

What if I could use CSS to color the photos automatically?

Image for post
Image for post

And so I did 🤖.

How I made it dynamic

I achieved this entirely in CSS with pseudo elements and SVG filters. To soften the blacks, I added an overlay to each image creating a duotone effect (similar to Spotify).

Vail Joy has an excellent tutorial if you’d like to learn how to do this yourself.

Image for post
Image for post
Spotify’s duotone effect

Here’s my recipe for each image 👨‍🍳:

Image for post
Image for post
// Background
.background {
&:nth-of-type(1n) {
background-color: orange;
}
&:nth-of-type(2n) {
background-color: teal;
}
&:nth-of-type(3n) {
background-color: beige;
}

// Image
img {
mix-blend-mode: multiply;
filter: grayscale(100%) contrast(1.2);
}
// Overlay
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #1e3265;
mix-blend-mode: lighten;
}
}

Adding the overlay to soften the blacks is a game-changer 👌🏼.

Image for post
Image for post
Overlay — Before & After

End result

Image for post
Image for post
Directional aware hover with JS

🎩 Ta-da! Want to know the best part? This method is 100% non-destructive, meaning each photo will always be the original. Anyone can change their photo at anytime. Bye-bye Photoshop!

Bonus tip: When a user hovers, remove the filter to reveal the original image. Try it out! https://codepen.io/baileylatimer/embed/rgjgpx

P.S. If you enjoyed this article, it would mean a lot if you could drop a 👏 or two — or 50.

If you didn’t like it, let me know how I can improve. I’d really appreciate any feedback.

Instagram // Dribbble // LinkedIn // Portfolio site

Latimer Design

Building websites and brand identities with a minimalist…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store