Share Posted August 18, 2017 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 Link to comment Share on other sites More sharing options...
Share Posted August 18, 2017 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. Link to comment Share on other sites More sharing options...
Share Posted August 19, 2017 You could do something like this: See the Pen YxeRzb by ohem (@ohem) on CodePen 1 Link to comment Share on other sites More sharing options...
Author Share Posted August 19, 2017 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 Link to comment Share on other sites More sharing options...
Author Share Posted August 19, 2017 Thanks Oliver16Years, Can u show me what u mean? Link to comment Share on other sites More sharing options...
Share Posted August 19, 2017 Ofc >>> See the Pen BdYvgv by oliver15years (@oliver15years) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted August 19, 2017 Thanks very much Oliver16Years, exactly what I needed. 1 Link to comment Share on other sites More sharing options...
Share Posted August 19, 2017 Isn't that the same thing I did? 1 Link to comment Share on other sites More sharing options...
Share Posted August 19, 2017 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted August 19, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now