Overlay PNG on image

Question

I'm trying to do something that's probably quite simple, but I can't get my head around it.

I'm trying to overlay a transparent PNG with a fade over the top of another image using CSS if that's at all possible. I'm trying to achieve this result, but utilizing two images, the actual image and then the PNG overlay which creates the fade.

What I'd Like to Achieve

It's on a WordPress website utilizing the featured image system, so I'd like to make it simple for our editors who will be able to simply upload the featured image and have the fade overlay automatically, no need to edit the image etc or create a PNG with the fade already as that'll be a lot of image editing work. Trying to simplify the process.

The website for a look at the code

Any help with this would be amazing! Thank you in advance!

Try to take a look at this: https://stackoverflow.com/questions/19713813/fade-image-to-transparent-like-a-gradient If you still have further questions, please provide what you came up with so far. — Carle B. Navy, Mar 18 '19 at 01:32

score 0 · Accepted Answer · answered Mar 17 '19 at 22:34

You can use the absolute position property to set the two images on top of each other. To have greater control over the filtering image, you can use the filter property and set the opacity you would like it at. This snippet shows three examples: One where the filtering image is set to 70%, one at 50%, and the other at 0%.

.ref {
  position: relative;
  height: 200px;
  margin-bottom: 10px;
}

.imgMain {
  position: absolute;
  top: 0px;
  left: 0px;
}

.imgFilter {
  position: absolute;
  top: 0px;
  left: 0px;
  filter: opacity(70%);
}

.imgFilter2 {
  position: absolute;
  top: 0px;
  left: 0px;
  filter: opacity(50%);
}

.imgFilter3 {
  position: absolute;
  top: 0px;
  left: 0px;
  filter: opacity(0%);
}

<div class="ref">
  <img class="imgMain" src="https://picsum.photos/200?image=985" />
  <img class="imgFilter" src="https://picsum.photos/200?image=1022" />
</div>

<div class="ref">
  <img class="imgMain" src="https://picsum.photos/200?image=985" />
  <img class="imgFilter2" src="https://picsum.photos/200?image=1022" />
</div>

<div class="ref">
  <img class="imgMain" src="https://picsum.photos/200?image=985" />
  <img class="imgFilter3" src="https://picsum.photos/200?image=1022" />
</div>

Overlay PNG on image

1 Answers1