Is it possible to apply a css blend mode to an element in a different div?

Question

Is it possible to apply a css blend mode to an element in a different div?

E.g, I have a large background hero image in one div. Above that image (in a different div) I have a blue semi-transparent box with text in it. This transparent box is what I would like to apply a blend to, but it seems to not work perhaps because they are not in the same div, like in the example https://css-tricks.com/basics-css-blend-modes/

I am working in wordpress, so it will be a bit hard to re-structure the HTML in order to put the image and the colored box in the same div.

Does anybody know of a trick I can use to achieve this method?

Thanks in advance!

Answer 1

Use mix-blend-mode.

DEMO:

http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview

There are two ways to use blend-modes:

1. background-blend-mode: If both the background are in same div, then this property can be used.

2. mix-blend-mode: When you want to blend background of 2 different elements, then you can use the mix-blend-mode property.

code:

HTML:

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

CSS:

div.wrapper {
  position: relative;
}
div.first,
div.second {
  width: 300px;
  height: 200px;
  position: absolute;
}
div.first {
  background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat;
  z-index: 9;
  top: 0px;
  left: 0px;
}
div.second {
  background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat;
  z-index: 10;
  mix-blend-mode: difference;
  top: 30px;
  left: 120px;
}

Answer 2

Here is a trick:

you can add both divs in a single div. Then in css You can add the two backgrounds for a single div. This way, you can use the background-blend-mode property to blend the two images.

Here's an example: https://jsfiddle.net/4mgt8occ/3/

Answer 3

You can use :after or :before to create another element in the img-div. Then set the background color with rgba(). The 0.2 here is the opacity of the background color. For the text div, you don't have to do anything about it.

div#wrapper::after {
    background-color: rgba(216, 223, 228, 0.2);
    display: block;
    width: 100%;
    height: 100%;
    content: ' ';
}