Blend-mode to any element in a scene?

(marrouche) #1

If not directly supported > how to ?

(Loves Hype) #2

Not directly. Not any. For Images a good starting point is here…

As Hype wraps images into a container structure you can’t recreate the example easily.

Update: There was a thread discussing it:

Conclusion: Be aware of the IE-User as he won’t see your creation :smile:

(Loves Hype) #3

I found a solution that allows you to use most blendmodes just by adding a class to any Hype-element. I added the following MODES to the solution:

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • normal
  • overlay
  • saturation
  • screen
  • soft-light

To add the blendmode use one of the MODES and assign a class with the pattern blendmode-MODE:

For soft-light:

blendmode-soft-light (303,8 KB)

(Loves Hype) #4

I’ll add it to the LayoutHelper-Extension (with a disclaimer)!

(Loves Hype) #5

Wishlist for Hype 4 (or 4.x)
Hype Blendmodes (with export warning for IE)

(marrouche) #6

you are a genius

I shall try to implement ?


(Loves Hype) #7

Thanks, well the code ins’t that complicated. :slight_smile:

Please be aware of the following:

(marrouche) #8

the code was written in a "function " . > is there an easy way to export this ‘function = blendmodes()’ to the desktop and reuse it in another document or always copy paste .?

(marrouche) #9

can we see the bend effect directly within Hype document > no need to check the result in a browser?

(Loves Hype) #10

Techtalk: The function has to be called on “Scene Load” or “Layout Load” and you can recreate it in a new document (copy&paste). There is no easy way to implement this with a Preview. With pure CSS it would be possible but as Hype “wraps” Image elements and CSS doesn’t allow selectors that look backwards (yet).

Easy answer: I am working on making the function easy to transfer. No previews.


I’m guessing my extension (in the thread you pointed too) is a non starter then :slight_smile:

I created one back last year. All you have to do is include the script in the head HTML and call it in any document like:

hypeDocument.setMixBlendMode(selector, mode) ;

Original post:
When will Hype support blend-mode?

(Loves Hype) #12

@DBear Searching the forum comes second to implementing something. But I did link your solution up top at the beginning!!

@kamal To make things easy here is a Symbol-based approach that can be copy & pasted to any new document. The symbol hides itself and enables blendmodes across your entire Hype document.

Update: (17,9 KB)  <-- old version

Latest Version can be found here: