CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jeremy
Jeremy

Reputation: 1384

Change div color on parents background-color

I am trying to make a cube change based on its background color. I hoped this was possible by giving an element a bit of a transparent background and a filter to invert the color of its parent background. But of course, it just inverts its own color.

In this example, it works with javascript by telling it to change background-color at (for example) document.height(). But I also want it to invert the color when it goes over an image.

Is there maybe some way to do this? With :hover you can do stuff like .section1:hover cube{ ... } so is there maybe a pseudo-element like :overlaying?

.cube{
  position: fixed;
  height: 50px;
  width: 50px;
  left: calc( 50vw - 25px );
  bottom: 50px;
  background-color: RGBA(255,255,255, .2);
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.section{
  height: 600px;
  width: 100vw;
}

.section1{
  background-color: #AAAAFF;
}

.section2{
  background-color: #FFAAAA;
}

.section3{
  background-color: #AAFFAA;
}
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>

<div class="cube"></div>

Upvotes: 1

Views: 443

Answers (1)

Temani Afif
Temani Afif

Reputation: 272772

Maybe you are looking for mix-blend-mode:

.cube {
  position: fixed;
  height: 50px;
  width: 50px;
  left: calc( 50vw - 25px);
  bottom: 50px;
  background-color: RGBA(255, 255, 255);
  mix-blend-mode: difference;
}

.section {
  height: 600px;
  width: 100vw;
}

.section1 {
  background-color: #AAAAFF;
}

.section2 {
  background-color: #FFAAAA;
}

.section3 {
  background-color: #AAFFAA;
}
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>

<div class="cube"></div>

Upvotes: 4

Related Questions