How to replicate PS layered mode

Question

Does anyone know a good way to replicate layered Photoshop using image or CSS?

I am working on a project that has thumbnails that get overlaid when you hover over them, but the designer used a set of layers to reproduce, and I cannot figure out how to create it on the Internet.

The best I came up with is either using rgba or transparent png, but even then it doesn't look like that.

Answer 1

There are new CSS properties to accomplish this thing: blend-mode and background-blend-mode .

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

These properties are configured to work in much the same way as Photoshop blending modes, and allow you to set various modes as the values ​​of these properties, such as overlay , screen , lighten , color-dodge , and, of course, multiply .. among others.

blend-mode will allow images (and possibly content? I haven’t heard anything to suggest that at the moment.) layered on top of each other to apply this blending effect.

background-blend-mode will be very similar, but it will be for background images (using background or background-image ), not the actual image elements.

---

EDIT: The next section becomes a little inappropriate as browser support grows. Check this graph to see which browsers support this: http://caniuse.com/#feat=css-backgroundblendmode

---

If you have the latest version of Chrome installed on your computer, you can see these styles in use by including some flags in your browser (just enter them in the 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 

Turn on these bad guys and then check out this fiddle: http://jsfiddle.net/cqzJ5/ (If the styles are correctly included in your browser, the two images should be mixed so that the scene looks like it is under water)

Although this may not be the most legitimate answer at the moment due to almost completely nonexistent support for this feature, we can hope that modern browsers will use these properties in the near future, providing us with a really good and simple solution to this problem.

Some additional reading resources in blend modes and 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/

Answer 2

Just for the record, this guy is developing a library for this. I just entered it during the study, have not tried it yet.

https://github.com/Phrogz/context-blender

Answer 3

Simple with a bit of SVG:

 <svg width="200" height="200" viewBox="10 10 280 280"> <filter id="multiply"> <feBlend mode="multiply"/> </filter> <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" /> </svg> 

and some CSS:

 #kitten:hover { filter:url(#multiply); } 

Violin: http://jsfiddle.net/7uCQQ/381/

Answer 4

This is possible with 24.png - if you know the trick.

In illustrator, you can export graphics in the 24.png format, but this never works as a multiplication.

I found.

• get your own multiplier
• put a solid black 100% block behind it and select both graphs
• in the transparency window, select Make Mask, and then Invert Mask
• export to 24.png file

works the same as multiplication when z-index (ed) is on top of the image.

Answer 5

There are no such opportunities. The only layout options you get are even close:

• lighter layout mode in HTML5 <canvas> (which is a + b not a * b and has the opposite effect for multiplication)

• min or subtract Compositor only in IE.

Nothing is real.

In general, you should not try to export Photoshop comps as layers, but render them into one opaque image. For rollover, you can take two images (one for normal state, one for freezing) and exchange them with each other using the CSS style :hover to select a different background image, or, which is better, since it does not require preloading and reduces HTTP queries - combine both images into one and use background-image / background-position to display the right side of this image in each state as a background image. ("CSS sprites")

Answer 6

Recently, I needed to do exactly what the OP asked, so I searched. I found a great way to reproduce the multiplication effect by making transparent PNG in Photoshop.

• Create a new document with the same dimensions as your multiplication layer.
• Fill the document in black.
• Add a vector mask (the icon to the left of the “fx” layer at the bottom of the layers window).
• Alt/Option + click on the mask itself.
• Now copy and paste your multilayer layer into the mask.
• Cmd/Ctrl + i to invert the newly inserted layer.
• Create a new layer below this layer and add the image over multiple overlays.
• Everything should look pretty close to your desired result. If necessary, you can edit the opacity masked layer that we created.
• When it looks good, just switch the visibility of the bottom layer and save the masked layer as PNG et voila!

All loans are owned by Sojeong from https://superuser.com/questions/381704/multiply-blending-mode-to-png

Answer 7

Check this out: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

Using these instructions, I successfully made the watermark a black and white image (ink in my case with black and gray on a solid white background) on a dark background (wood in my case). There is virtually no difference with the actual Multiply Adobe filter.

I used Photoshop instructions to remove white from my image, leaving only black and gray on a transparent background. Saving this in PNG and placing it on a tree in CSS / HTML still looked much worse than repeatedly, but greatly reducing the brightness of the PNG that allowed it (light grays stood out earlier, making it ugly).

In general, I recommend you play in Photoshop, replicating the web situation: a translucent (without special material) layer on top of a solid background. Textbooks, such as the ones above, can allow you to reproduce multiple or other bizarre effects.

Answer 8

Not sure if you're lucky. As far as I know, this is not possible, even if you tried to integrate some advanced JavaScript with it.