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?

Will · Accepted Answer · 2020-07-28 14:27:55Z

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/

answered Jul 28, 2020 at 14:27

Will

1,2031 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change color of multi-layered image with CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related