CODEWITHSUNDEEP
htmlcssimage
nathan lachenmyer
nathan lachenmyer

Reputation: 5550

Tint a white-on-transparent image with CSS

I have an image that's white with a transparent background; I'd like to be able to dynamically color/tint the image on hover to another color.

My first thought was to use background-blend-mode to multiply a solid red image with my white-on-transparent image to get a red-on-transparent image. Unfortunately, this doesn't give the desired behavior and instead gives me a solid red box. Example here: https://jsfiddle.net/wcL2exa4/58/

I've looked into CSS mask but that also doesn't seem to do what I want. How can I easily turn my white image into a colored one?

thank you!

Upvotes: 1

Views: 603

Answers (3)

Obzi
Obzi

Reputation: 2390

Are all background image white ?
You may do it by changing the default image to a red version, and apply some filter to it to get it white.

Upvotes: 0

sol
sol

Reputation: 22949

You can try using mix-blend-mode on a pseudoelement. I've used multiply and screen in the example below

document.getElementById('c').addEventListener('change', (e) => {
  const mode = e.target.checked ? 'screen' : 'multiply';
  document.documentElement.style.setProperty('--blend-mode', mode);
})
:root {
  --blend-mode: multiply;
}

#container {
  position: relative;
  background: black;
  width: 100%;
  height: 250px;
  margin-bottom: 2rem;
}

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

#constellation:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: red;
  mix-blend-mode: var(--blend-mode);
}
<div id="container">
  <div id="constellation" class="bg">
  </div>
</div>
<input id="c" type="checkbox"><label for="c">Red Background</label>

Upvotes: 1

dantheman
dantheman

Reputation: 3814

There is a way but it's a bit weird

filter: brightness(0.5) sepia(1) hue-rotate(50deg)

Change the brightness and hue rotate till you get the colour you want.

Upvotes: 1

Related Questions