Why this -webkit-mask-image with linear gradient value causes images to not display

HTML-CSS
1

The idea is to show a white gradient in the image bottom. So that it looks this way:

image
image403×641 81.5 KB

That is how it is displayed in Firefox, but in Chorme it looks like this

image

I’m using this:
mask-image: linear-gradient(to bottom,#fff 80%,rgba(0,0,0,0) 97%); -webkit-mask-image: linear-gradient(#fff 80%,rgba(0,0,0,0) 97%);

Tried this as well (wich uses pixels instead of percents).
-webkit-mask-image:linear-gradient(#fff 272px,rgba(0,0,0,0) 320px);

What puzzless me is why is not working properly…

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.