0

I've tried to add the mix-blend-mode: difference; to „span“ but it doesn't work.

This solution works: I add the blend mode instead „.caption span“ to „.caption“. But what I really need, is to put span in a div.

Any ideas why? Thank you!

.caption {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 99;
  font-size: 62px;
}

.caption span {
  color: #fff;
  mix-blend-mode: difference;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.background-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<div class="row">

  <div class="row-inner">

    <div class="caption">
        <span class="test">Headline</span>
    </div>

  </div>

  <div class="background-image">
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
  </div>


</div>
l00per
  • 481
  • 4
  • 7
  • 19

1 Answers1

1

In my knowledge, the only way is to use the mix-blend-mode is by placing <span> and <img> in the same <div>

working sample for you.

span {
  color: #fff;
  mix-blend-mode: difference;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 99;
  font-size: 62px;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.background-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<div class="row">
  <div class="background-image">
    <span class="test">Headline</span>
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg">
  </div>


</div>

Another way is to set the background of the wrapper div to the image and it will work.

I hope this was helpful for you.

The values you can use with mix-blend-mode are as per this link

/* Keyword values */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Global values */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;
Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69
  • Great, thank you weBer. Another question – maybe you could help me? Would it be possible to use a greyfilter (to make it black and white)? Something like `filter: grayscale(100%);`? Thank you :) – l00per Nov 23 '17 at 16:31
  • @l00per I would love to help but if the answer was helpful please do mark it as the answer so others can follow it, and about applying the filter you want to apply the filter to **text** or **background img**.? – Jithin Raj P R Nov 24 '17 at 05:18
  • Hope mark it as answer works? Yes, on the text. So the overlay is just black and white :) Something like this? span { color: #fff; mix-blend-mode: difference; filter: grayscale(100%); position: absolute; top: 10px; left: 10px; z-index: 99; font-size: 62px; } – l00per Nov 24 '17 at 06:10
  • @l00per I have added some values for `mix-blend-mode` in my answer, I couldn't find anything to go with you need, but I will try something if I got an idea I will get back to you. And by the way, `grayscale` and `mix-blend-mode` will not work together. Sorry. – Jithin Raj P R Nov 24 '17 at 06:45
  • 1
    Thank you very much. Yes, I thought this could be a problem :) – l00per Nov 24 '17 at 06:59
  • @l00per if I get anything else I will get back to you. – Jithin Raj P R Nov 24 '17 at 07:00