How do I reduce the opacity at the bottom of an image?

Question

I have the below HTML for an image, but I want to fade the opacity for the bottom 20% of the image, so that it looks as though it is floating on a cloud. I tried using linear gradient but that doesn't appear to be working. How can it be done?

<img class="picOne" onMouseEnter={PicOneChange} src={require("./cake-1.jpeg")} alt="pic1"></img>

score 0 · Answer 1 · answered May 31 '22 at 13:32

0

.mask {
  background:url('https://i.stack.imgur.com/NeMfJ.jpg') no-repeat;
  height:296px;
  width:474px;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

<div class="mask"></div>

answered May 31 '22 at 13:32

DreamTeK

32,537
27
112
171

How do I reduce the opacity at the bottom of an image?

1 Answers1