0

How can I make the Carousel-Arrows changing their colors, depending on the picture displayed beneath them?

For example, if I have a bright picture, arrows are black; when I have a dark Picture, arrows are white.

Here is an example of the effect: http://www.herschelsupply.com/

Thank You!

Łukasz Rogalski
  • 22,092
  • 8
  • 59
  • 93
JasperBE
  • 3
  • 2

1 Answers1

2

I suggest you to look at this interesting jQuery plugin called BackgroundCheck:

http://www.kennethcachia.com/background-check/

This plugin automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.

Download the minimized version from Github: https://raw.githubusercontent.com/kennethcachia/Background-Check/master/background-check.min.js

How to use:

If an element overlaps any of the images, either .background--dark or .background--light is added to it. BackgroundCheck does not change an element's style — you must do so using CSS.

p.background--light {
  color: black;
}

For more detailed information, check the documentation here:
https://github.com/kennethcachia/Background-Check

Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54
  • 1
    Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). Answers that are "barely more than a link to an external site” [may be deleted](http://stackoverflow.com/help/deleted-answers). – Quentin Aug 06 '14 at 20:14
  • @Quentin: Now edited with more info. Not sure though if it's enough now. Please let me know. – Alessandro Incarnati Aug 06 '14 at 20:25