Как сделать изображение прозрачным по краям?

Question

[Rubical]

Как сделать изображение по краям прозрачным, примерно как на картинке ниже ?
P.s на фоне под этой картинкой другая картинка, так что нужно сделать именно прозрачным

Comments

[Вадим]

маски

[Elvis]

Вадим, илоны?

[Rubical]

Elvis, с ними и не такое можно провернуть

Answer 1

[R4ZΞ]

Привет.

.left img {-webkit-mask-image:-webkit-gradient(linear, right top, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

.right img {-webkit-mask-image:-webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}

Comments

[Ankhena]

Градиенту вообще не нужны префиксы.
Маске для хромчиков нужны.

Но лучше писать без префиксов и потом использовать автопрефиксер.
Потому что вариант только с одним вебкитом без нормального свойства не прокатит.