Change color of multi-layered image with CSS

Question

I'm trying to create the following functionality:

• Have two transparent images layered on top of each other inside of a <div>; one is an object and the other image represents the 'glow' around the object.
• On hover, I want the glow to change colors, but I do not want the original object to change colors.

Here's my existing setup:

HTML:

<div id="container">

  <div id="constellation">
  </div>

  <img src="https://storage.googleapis.com/astrology-images/constellations/aquarius-white.png"/>

</div>

CSS:

#container {
  position: relative;
  background: black;
  width: 800px;
  height: 250px;
}

#constellation {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 250px;
  background-image: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}

#constellation:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #4E6F2E;
  mix-blend-mode: multiply;
  opacity: 0;
}

#constellation:hover:after {
  opacity: 1;
}

I've created an image of a constellation that lives in the <img>; this should always stay white.

In a separate <div> I have an image for the "halo"; this image uses the mix-blend-mode to multiply the image with a color on hover.

Unfortunately, the way I have it now has both images multiplied by the same color, even though they are in different elements! I have a live example here: I have an example here: https://jsfiddle.net/wcL2exa4/105/

How can I get my desired behavior?

Answer 1

The problem is that #constellation:after is positioned above your image. Set a higher z-index for your image and hover trigger on the parent.

#container {
  position: relative;
  background: black;
  width: 800px;
  height: 250px;
}

img {
   position: relative;
   z-index: 2;
}

#constellation {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 250px;
  background: url("https://storage.googleapis.com/astrology-images/constellations/aquarius-halo-white.png");
}

#constellation:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: red;
  mix-blend-mode: multiply;
  opacity: 0;
}

#container:hover #constellation:after {
  opacity: 1;
}

See example here: https://jsfiddle.net/pcaoyb7s/