Invert Colors of an Image in CSS or JavaScript

Invert colors of an image in CSS or JavaScript

CSS3 has a new filter attribute ~~which will only work in webkit browsers~~ supported in webkit browsers and in Firefox. It does not have support in IE or Opera mini:

img {   -webkit-filter: invert(1);   filter: invert(1);   }

<img src="http://i.imgur.com/1H91A5Y.png">

Invert navigation text and logo color from white to black/colored when scrolling depending on color of background?

One approach would be to create two classes, a light and dark class. Each of those contains CSS property (aka variable) for your colors. Then just use the scroll position to switch the classes as needed.

For the image, you can either switch the src attribute within that same code block, or use something like filter: invert(1); to modify it's colors.

For a subtle animation, you can also just use CSS: transition: all 0.25s ease;.

Here's a quick demo, (it's been about 10 years since I last used jQuery, so that part may have some room for improvement).

$(window).scroll(function(){
const pageHeight = $(window).height();
  if($(window).scrollTop() > pageHeight){
    $('body').addClass('dark').removeClass('light')
  }else{
    $('body').addClass('light').removeClass('dark')
  }
});

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  transition: all 0.25s ease;
}

body.light {
  --foreground: #000;
  --background: #fff;
}
body.dark {
  --foreground: #fff;
  --background: #000;
}

body.dark img.logo-image {
  filter: invert(1);
}

div.outer {
  width: 100%;
  min-height: 400vh;
}

nav.top-bar {
  top: 0;
  display: flex;
  width: 100%;
  background: var(--background);
  position: fixed;
  border-bottom: 1px solid var(--foreground);
}

img.logo-image {
  width: 6rem;
}

a.menu-link {
  margin: 0.5rem;
  padding: 0.25rem;
  color: var(--foreground);
  border: 1px solid var(--foreground);
}

div.content {
  height: 100vh;
  border-bottom: 1px dashed var(--foreground);
}

div.content p {
 padding-top: 4rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="light">
<div class="outer">
  <nav class="top-bar">
    <img class="logo-image" src="https://newhomespain.com/wp-content/uploads/2016/11/new-home-spain-hi-res-logo.png">
    <a class="menu-link">Home</a> 
    <a class="menu-link">Webshop</a> 
    <a class="menu-link">About</a> 
    <a class="menu-link">Contact</a> 
  </nav>

    <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Donec sed odio operae, eu vulputate felis rhoncus. Salutantibus vitae elit libero, a pharetra augue. Nihil hic munitissimus habendi senatus locus, nihil horum? A communi observantia non est recedendum.
    </p>
  </div>
  <div class="content">
    <p>
      Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
    </p>
  </div>
  <div class="content">
    <p>
      A communi observantia non est recedendum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
    </p>
  </div>
</div>

</body>

inverting colors in part of an image - HTML, CSS, JS

Create an element with zero width and height, and outline: 8px solid invert. Then move this element around with your selector, and this will invert the stuff that it passes over.

How to invert color of entire page when hovering on a link

You have to use Javascript to achieve what you want.
The idea is to apply a class with filter: invert(1); to the body element when the mouse is over (onmouseoover event) the link and remove it when the mouse leaves (onmouseleave event):

const invertLink = document.querySelector('#invert');const toggleDark = () => document.querySelector('body').classList.toggle('dark');invertLink.addEventListener('mouseover', toggleDark);invertLink.addEventListener('mouseleave', toggleDark);

.dark {  filter: invert(1);  background: black;}

<body>  <h1>Hello World</h1>  <a href="#" id="invert">Hover me!</a><br><br>  <img src="https://www.gravatar.com/avatar/"></body>

Invert colors of html when clicking (except imgs)

You can use this code here:

function invertFunction(x) {
  x.classList.toggle("invertbutton");
  if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
    $("div:not(#movingbutton)").css('filter', 'invert(100%)');
    $("img").css('filter', 'invert(100%)');
  } else {
    $("div:not(#movingbutton)").css('filter', 'invert(0%)');
    $("img").css('filter', 'invert(0%)');
  }
}

And you can remove this css:

.invertbutton .html{
  -webkit-filter: invert(100%);
    filter: invert(100%);
}

function invertFunction(x) {  x.classList.toggle("invertbutton");  if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {    $("div:not(#movingbutton)").css('filter', 'invert(100%)');    $("img").css('filter', 'invert(100%)');  } else {    $("div:not(#movingbutton)").css('filter', 'invert(0%)');    $("img").css('filter', 'invert(0%)');  }}

div:not(#movingbutton) {  filter: invert(0%);}.invertfunction {  cursor: pointer;  position: fixed;  top: 20px;  left: 20px;  width: 60px;  height: 30px;}#onbutton {  width: 60px;  height: 30px;  background-color: #fff;  border-radius: 20px;  border: 1px solid #848484;  -webkit-transition: .3s ease;  -moz-transition: .3s ease;  -o-transition: .3s ease;  transition: .3s ease;}#movingbutton{  width: 28px;  height: 28px;  border-radius: 20px;  border: 1px solid #848484;  background-color: #BDBDBD;  -webkit-transition: .2s ease;  -moz-transition: .2s ease;  -o-transition: .2s ease;  transition: .2s ease;}.invertbutton #onbutton {  background-color: #42B94E;}.invertbutton #movingbutton {  -webkit-transform: translateX(30px);  -ms-transform: translateX(30px);  transform: translateX(30px);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><div class="invertfunction"onclick="invertFunction(this)">  <div id="onbutton">    <div id="movingbutton">    </div>  </div></div><br><br><br><div style="background-color: red;" height="100px" width="100px">Example div1</div><div style="background-color: green;" height="100px" width="100px">Example div2</div><div style="background-color: blue;" height="100px" width="100px">Example div3</div><div>   <img width="100px" src="http://www.lyricsmode.com/i/upictures/205882.gif"></div>

CSS Invert colors in transparent svg element

One way of achieving the required result is close to the code given in the question.

The color of the text in the p element is inverted so that the part lying over the circle has the color cyan. The background of the element containing the p and svg (in this snippet's case, the body) has a background of white set so the mix-blend-mode on the text takes the difference of the color (which is now #00ffff = cyan) and white (#ffffff) to take us back to red (#ff0000).

As noted in comments, it's not possible to invert the SVG circle color as it has transparency so will always have that whatever RGB it has inverted so it's filled with a solid color.

body {
  background: white;
  height: 100vh;
}

.cursor {
  position: absolute;
  top: 0;
  left: 0;
}

.cursor__inner {
  fill: black;
}

p {
  color: cyan;
  color: red;
  filter: invert(1);
  mix-blend-mode: difference;
}

<body>
  <svg class="cursor" width="64" height="64" viewBox="0 0 64 64">
      <circle class="cursor__inner" cx="32" cy="32" r="32" />
    </svg>
  <p>Hello World!</p>
</body>

Invert colors inside selection

I cannot see how to do this in a complex case, where the selection contains several HTML elements that might be setting color and background color individually (though of course some complex HTML/CSS parsing must be able to do that but I'm not capable).

However, we can fairly simply deal with the straightforward case where the color and background color are consistent across the parent div of the selection.

On a selection event this snippet reads the computed style of the parent element, calculates the inverse of the color and backgroundColor and sets CSS variables to these which are picked up and used in the selection pseudo element.

document.addEventListener('selectionchange', (e) => {
  function invert(color) {
    color = color.replace('rgb(', '');
    color = color.replace(')', '');
    color = color.replace('rgba(', '');
    let colors = color.split(',');
    let r = colors[0].replace(' ', '');
    let g = colors[1].replace(' ', '');
    let b = colors[2].replace(' ', '');
    let a = (colors.length > 3) ? colors[3].replace(' ', '') : 1;
    r = ~r & 255;
    g = ~g & 255;
    b = ~b & 255;
    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
  }
  selection = window.getSelection();
  if (selection.anchorNode) {
    const parent = selection.anchorNode.parentElement;
    const style = window.getComputedStyle(parent);
    parent.style.setProperty('--color', invert(style.color));
    parent.style.setProperty('--background-color', invert(style.backgroundColor));
  }
});

.invertSelectionColors::selection {
  color: var(--color);
  background-color: var(--background-color);
}

<div class="invertSelectionColors" style="background-color: cyan;color:#000000;">
  here is some text originally background color cyan and color #000000
</div>
<div class="invertSelectionColors" style="background-color: rgba(255, 0, 0, 0.5);color:#0000ffff;">
  here is some text originally background color rgba(255, 0, 0, 0.5) and color #0000ffff
</div>

Invert Colors of an Image in CSS or JavaScript