Creating a Dynamic Photo-Grid with CSS Blend Modes
“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.
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.
Static images = Zero flexibility
Each photo is colored orange, teal, or beige. They are manually organized to keep matching colors from touching.
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.
- Employee #2 leaves 🚶♂️
- Pattern fails 💀
The pattern broke whenever someone left or a new employee was hired. To fix the pattern, we had to:
- Remove existing image
- Colorize new image in Photoshop
- Upload new colorized image to site
- 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?
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.
Here’s my recipe for each image 👨🍳:
// 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 👌🏼.
End result
🎩 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
