If not directly supported > how to ?
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
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:
To add the blendmode use one of the MODES and assign a class with the pattern
hypeBlendmodes.hype.zip (303,8 KB)
I’ll add it to the LayoutHelper-Extension (with a disclaimer)!
you are a genius
I shall try to implement ?
Thanks, well the code ins’t that complicated.
Please be aware of the following:
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 .?
can we see the bend effect directly within Hype document > no need to check the result in a browser?
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
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) ;
When will Hype support blend-mode?
@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.
Latest Version can be found here: