0

I have multiple images on top of each other. They are almost the same, only some parts are different. I want to make a transition effect between the two, so that the new parts appear and the old parts disappear, but most of the image (the static parts) stay the same.

I did that with moving the opacity of the new image from 0 to 1 and the old image from 1 to 0. They add up to 1, but they still produce a different color.

I've made a fiddle to demonstrate this: https://jsfiddle.net/sashee/r740snug/1/ . Here, there are two red boxes and they overlap. They both have opacity: 0.5, so I'd assume the overlap renders as true red. But notice the third box, below the other two that has no opacity and its color is clearly different from the overlapped area.

<div
class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box1{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5;
}

.box2{
  position: absolute;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5;
}
.box3{
  position: absolute;
  top: 100px;
  width: 100px;
  height: 100px;
  background-color: red;
}

I couldn't find any information how opacity should work and how should I set the different elements' opacities to visually add up to 1. Is there a way to have 2 elements on top of each other with some opacity values and they add up to a color that is the same as having opacity:1?

Tamás Sallai
  • 3,195
  • 1
  • 14
  • 25
  • 2
    opacity does not “add up” like that. Your assumption, _“They both have opacity: 0.5, so I'd assume the overlap renders as true red.”_ is simply completely wrong. – CBroe May 05 '21 at 09:45
  • @CBroe, is there a way to mix to elements with opacity < 1 and still have the original color? – Tamás Sallai May 05 '21 at 09:49
  • I am not sure what exactly you want to achieve here, resp. where things go wrong. Can you provide an example with actual images? – CBroe May 05 '21 at 09:59
  • @CBroe, here's an example with images: https://jsfiddle.net/sashee/rokq6pjd/8/ – Tamás Sallai May 05 '21 at 10:12
  • I don’t think you will be able to get both, removing _and_ adding parts from/to the image, working at the same time, with just two images and opacity. (If you kept the lower image at opacity:1 all the time, it would work for the removal of the arrow in this example.) Maybe if you had a third image that contained all the parts that stay the same, that you could place lowest and always with full opacity … – CBroe May 05 '21 at 10:26
  • I don’t know if you need this for just _any_ kind of image - but with the content you have here in the example, it might make more sense to go with an image format like SVG in the first place? Then you don’t need two images to begin with but could fade specific elements inside the SVG in and out. – CBroe May 05 '21 at 10:29
  • Yeah, manipulating SVGs is plan B, but I'm hoping for a solution that works with any images and not just generated ones. And to make things more complicated, the images here have also transparent parts, so even adding a third image with opacity:1 would change the output. Anyway, thanks for looking into it, I'll think about the approach I'll take. – Tamás Sallai May 05 '21 at 10:36

0 Answers0