Animating mask

[Gumbo]

Hi.

Hope someone can help me. I want to animate the mask upwards to reveal the image behind. The image can be any image. Can someone tell me what I've gotta change?

 

Thanks very much.

 

Gumbo

See the Pen qXxxwJ by Gumbo (@Gumbo) on CodePen

[Oliver16Years]

Masks are available in SVG context only. Your image seems an 1x1 px one. You can't mask in pure DOM, only imitate it by hiding overflow and positiononing div content inside a rectangular box.

[ohem]

You could do something like this: 

 

See the Pen YxeRzb by ohem (@ohem) on CodePen

 

[Gumbo]

Thanks for your reply guys.

Ohem, I need the image to stay where it is and for the mask to reveal it from the bottom to the top

[Gumbo]

Thanks Oliver16Years,

 

Can u show me what u mean?

[Oliver16Years]

Ofc >>> 

See the Pen BdYvgv by oliver15years (@oliver15years) on CodePen

 

[Gumbo]

Thanks very much Oliver16Years, exactly what I needed.

[ohem]

Isn't that the same thing I did?

[Oliver16Years]

Sorry ohem, I didn't want to steal Your solution. I was in a hurry and I thought Gumbo want something different when he wrote

Quote

"Ohem, I need the image to stay where it is and for the mask to reveal it from the bottom to the top"

I found a broken codepen in his post ( as I remember ) and forked it and fixed it which became almost exactly like Yours.

My 2 likes goes to You

[Gumbo]

Hi Ohem, with yours the image moved with the mask or that's wot happened when I used ur code. It was very close. Unless I didn't input ur code into mine correctly.

I really appreciate your help.