CSS, HTML, JavaScript

CSS Blend Modes Testing App

This exercise will involve CSS Grid Areas, CSS Blend Modes, CSS Transitions, CSS Animation (just a bit), and a bunch of JavaScript.

A number of ideas in the layout come from a great free CSS Grid Course by the amazing Wes Bos. I highly recommend his courses, including the free JavaScript 30.

We are making an app to show the effects of CSS Background-Blend-Modes. A working example is here.

When the page loads, a bunch of random images will load as background images on a number of DIVs set up in an interesting way with CSS Grid Template Areas. Each DIV will also have a randomly generated background-color, which will be visible until the image loads.

When we mouseover any of the images, the hover state will cause the image to blend against the background color. The default blend mode for the app will be set via JavaScript to MULTIPLY. The image of the alley below (the second from the top on the left) is actually greyscale, but the hover is triggering a MULTIPLY blend mode against the background-color of the DIV the image is in (set, in this case, to purple):

( CSS Blend Modes were developed at Adobe, which makes sense because they because just like the blend modes in Photoshop. )

When we click on an image, a panel will slide up from the bottom with an H2 and P containing lorem ipsum text, set against the background color of the DIV:

When we mouse over the newly transitioned panel of text, its opacity will decrease slightly, allowing us to “see through” the panel down to the background image again.

In the header of the page will be two buttons. One will close any open text panels. The other will cause a menu to slide in from the left side. This menu will contain:

  • radio buttons, one for each blend mode
  • a color picker, to allow the user to set the background color on all the DIVs

This screenshot shows the menu out, with the default random background colors visible in the text panels:

This screenshot shows the system color picker active after the color input square has been clicked. It also shows the text panels displaying the user-selected colors:

There are at present no files to download for the exercise. However, you will need to know the CSS Blend Mode names:

  • Normal
  • Multiply
  • Color
  • Screen
  • Overlay
  • Darken
  • Lighten
  • Color-Dodge
  • Color-Burn
  • Soft-Light
  • Hard-Light
  • Exclusion
  • Saturation
  • Luminosity

To save some time, too, here are the random images we’ll use. Feel free to changed them if you want:

const potentialImages = [