Image Overlapping

Image Overlapping

Hi, I've got this one request to overlap some images in some special conditions....

I could use an image editor and work that out, and probably i will do that, but i wonder if there is anyway i can overlap 2 images....

I need something like:

Condition A: image A

Condition B: image C

Condition C: image A+C

Anyone knows how to do something like this?

Best regards,

Diogo CS Cordeiro
Hi Diogo,

One way of doing it is using CSS positioning:
  1. Add a container to the screen. Modify its extended properties: add an entry with name "style", value "position: relative;".
  2. Add two more containers, inside the 1st one. These will contain the images. Modify the extended properties for each one, like you did above, but set "position: absolute; left: XXpx, top: YYpx; z-index: ZZ;"
  3. Replace XX and YY for the desired coordinates for each image.
  4. Replace ZZ for the desired z-index, controlling which image stays above the other (bigger = on top).
  5. Add content (in your case, images) to both containers added on step 2.

I'm including a small html example in attach.

When you have the overlapping working, you can easily add logic for controlling your 3 scenarios. For example, you can hide each container with "display: none;".

Paulo Ramos
Thank you Paulo, I'll keep it in mind (and in record :-) )....

Actually, in this case that wouldn't do quite well, because my images have the same size, and it wouldn't be that beautiful....I used an image editor to edit them...

I'll go to the wishlist forum and post a suggestion to include a small image editor with the platform.

Best Regards,

Diogo CS Cordeiro