How to replicate PS multiply layer mode

Question

Does anybody know of a good way to replicate Photoshop's multiply layer mode using either an image or CSS?

I'm working on a project that has thumbnails that get a color overlay when you hover over them, but the designer used a layer set to multiply and I can't figure out how to produce it on the web.

The best thing I've come up with is either using rgba or a transparent png, but even then it doesn't look right.

Answer 1

There are new CSS properties being introduced to do just this thing, they are blend-mode and background-blend-mode.

Currently, you won't be able to use them in any sort of production environment, as they are very very new, and currently only supported by Chrome Canary (experimental web browser) & Webkit Nightly.

These properties are set up to work nearly exactly the same as photoshop's blending modes, and allow for various different modes to be set as values for these properties such as overlay, screen, lighten, color-dodge, and of course multiply.. among others.

blend-mode would allow images (and possibly content? I haven't heard anything to suggest that at this point though.) layered on top of each other to have this blending effect applied.

background-blend-mode would be quite similar, but would be intended for background images (set using background or background-image) rather than actual image elements.

---

EDIT: The next section is becoming a bit irrelevant as browser support is growing.. Check this chart to see which browsers have support for this: http://caniuse.com/#feat=css-backgroundblendmode

---

If you've got the latest version of Chrome installed on your computer, you can actually see these styles in use by enabling some flags in your browser (just throw these into your address bar:)

chrome://flags/#enable-experimental-web-platform-features chrome://flags/#enable-css-shaders  * note that the flags required for this might change at any time 

Enable those bad boys and then check out this fiddle: http://jsfiddle.net/cqzJ5/ (If the styles are properly enabled in your browser, the two images should be blended to make the scene look like it is underwater)

While this may not be the most legitimate answer at the current moment due to the almost entirely nonexistent support for this feature, we can hope that modern browsers will adopt these properties in the near future, giving us a really nice and easy solution to this problem.

Some extra reading resources on blending modes and the css properties:

• http://blogs.adobe.com/webplatform/2013/06/24/css-background-blend-modes-are-now-available-in-chrome-canary-and-webkit-nightly/
• http://demosthenes.info/blog/707/PhotoShop-In-The-Browser-Understanding-CSS-Blend-Modes
• http://html.adobe.com/webplatform/graphics/blendmodes/