0

I have been looking into animating an image background while using an image mask. I just dont know if its possible to use the image mask WHILE animating background color

Example here - JSFiddle

What ideally i am looking for is to Have the background image(grains) NOT show thought into the glass image while the blue color(water) is filling the cup.

Also since using the image mask i now am able to see the entire <div> filling with the blue color. Any way to not see that either? I want to have the glass image overlayed onto the background while im able to have the blue color fill the cup.

user616
  • 783
  • 4
  • 18
  • 44
  • Where is the mask that will suppress the water outside the glass? – mvw Feb 26 '14 at 19:38
  • @mvw Ahhh is that what im missing? – user616 Feb 26 '14 at 19:39
  • @mvw `.element` contains the a mask for the inner area of the cup – user616 Feb 26 '14 at 19:43
  • @mvw Thats what currently shows, but i want to mask out the blue part of the block OUTSIDE of the glass and NOT show the grains inside the glass – user616 Feb 26 '14 at 19:53
  • I see no effect of that mask image here - did you check its transparency channel? – mvw Feb 26 '14 at 19:57
  • Thinking i need multiple masks, one to mask out the grains from the glass and one to mask out the blue box from the outside of the glass. Then use z-index to layer them accordingly? – user616 Feb 26 '14 at 20:11

0 Answers0