img {
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
Use mask-image do CSS, veja abaixo.
Exemplo onde a imagem possui gradiente de opacidade da direita para a esquerda (to left).
O parâmetro de opacidade pode ser alterado aqui rgba(0, 0, 0, 1), onde o 1 é o máximo visível.
Aplique no sentido que você precisa nas outras imagens (to left, to right, to bottom, ...)
img {
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)));
}