automatically change text color of div on top of clickable slideshow

Question

i'm working on a fullscreen clickable slideshow with overlaying. While the starting color of this menu is white, i'm wondering if it is possible to maximize legibility by switching to black on lighter images. The order of the slideshow is permanent, so there is nu guesswork involved with which image should show a white or black version. Is there a simple solution for this problem?

I'm aware that there are countless questions around this topic, but it seems that in all these cases text is nested in. Or the suggested .js scripts are way to elaborate for (what seems) such a simple problem.

Thanks in advance.

HTML

  <div class="fullscreenslideshow">
  <div style="background-image:url(image1)" class="dark"></div>
  <div style="background-image:url(image2)" class="light"></div>
  <div style="background-image:url(image3)" class="light"></div>
  <div style="background-image:url(image4)" class"dark"></div>
  </div>

JS

$('.dark').click(function(){
     jQuery('h2').toggleClass('textlight');
});

$('.light').click(function(){
     jQuery('h2').toggleClass('textdark');
});

CSS

 .textlight {
 color:#FFF;
 }
 .textdark {
 color:#000;
 }

[JS detect image brightness](https://stackoverflow.com/a/13763063/383904) - and if you used Google already, where's the code you tried? And why it did not worked? — Roko C. Buljan, Jul 16 '17 at 21:52

Roko C. Buljan · Answer 1 · 2017-07-16T21:47:26.403

You could use white text with mix-blend-mode: difference; (see here for more examples)

div {
  background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 25%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 60%,rgba(255,0,0,1) 79%,rgba(255,0,0,1) 100%);
}

h2 {
  padding: 24px;
  text-align:center;
  font-size: 3em;
  
  color: #fff;                
  mix-blend-mode: difference;
}

<div>
  <h2>THIS IS SOME TEXT YYEY</h2>
</div>

If you don't want to be at the mercy of old browsers which don't support mix-blend-mode and have absolute control over your text color you could use data-* attribute:

$("[data-textcolor]").css("color", function() {
  return this.dataset.textcolor;
});

body{background:#C0FFEE;}

<div class="fullscreenslideshow">
  <div style="background-image:url(image1)" data-textcolor="#fff">SLIDE1</div>
  <div style="background-image:url(image2)" data-textcolor="#000">SLIDE2</div>
  <div style="background-image:url(image3)" data-textcolor="rgba(0,0,0,0.4)">SLIDE3</div>
  <div style="background-image:url(image4)" data-textcolor="red">SLIDE4</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

thanks for your answer. Blendmodes won't work, already tried that sadly enough. I'm more interested in a solution that activates a class on the text in a specific image is shown. Say image1 is mainly dark and is shown, a class that specifies a white color for the text is activated. Image 2 is light and is next in the slideshow, a class is activated with color:black. — kreemers, Jul 16 '17 at 21:24
@kreemers or... you actually meant: "auto**magically**"? https://stackoverflow.com/a/13763063/383904 — Roko C. Buljan, Jul 16 '17 at 21:50
@roko-c-buljan sadly not. This way the text gets nested inside the div, and pulling it out + applying it on the menu div doesn't work. I added the js that I forgot, which show how i'm trying to apply a specific class op each image. But it's not working either. Any thoughts? — kreemers, Jul 19 '17 at 12:10

automatically change text color of div on top of clickable slideshow

1 Answers1