CSS Blend Mode : Multiply

• 

  robeastblog · Member · May 1, 2014 at 8:56 am

  • Copy link
  • Add topic to favorites

  HI:

  I’ve been looking for a way to blend images with backgrounds the way one would blend two images using multiply in photoshop.

  Would something like this work here?

  img.multiply { -webkit-blend-mode: multiply; }

  The blog I need help with is: (visible only to logged in users)

• 

  hafizr · Member · May 1, 2014 at 9:16 am

  • Copy link

  Hi there,

  Instead of -webkit-blend-mode it looks like you should use mix-blend-mode instead.

  Resources:
  http://css-tricks.com/basics-css-blend-modes/
  https://medium.com/web-design-technique/6b51bf53743a

  Technically it should work if you add it to the Custom CSS in your WordPress.com site, but only browsers that support it will show the effect. For now only the latest versions of Chrome and Firefox do: http://caniuse.com/#feat=css-backgroundblendmode

• 

  robeastblog · Member · May 1, 2014 at 9:05 pm

  • Copy link

  Thanks, hafizr.

  I’ll check those out. Probably wait until it’s fully integrated to use the blend. I tried to use an alpha channel adjustment, but it’s not quite the same effect…