I currently have a black and white image of a logo. I want to be able to put a color overlay on this image using css however am unsure how to do so. This is what i mean:
Original: black and white logo
I want to be able to change this later using javascript, that's why i don't want to use photoshop or something like that. I haven't found a way I can do this.
CodePudding user response：
You have to create a section in html first.Then in css:
section {
background: url(image.jpg);
mix-blend-mode:hue;
}
section:hover:nth-child(1){
box-shadow:0 0 0 1500px #00ff00;
}
I don't know whether this might work as you are expecting, anyway give it a try. Might not work on some browsers and old versions of css. Refer this for more details: video
CodePudding user response：
You can go smart about that.
First make png with white surrounding for the apple (just turn black pixels into transparent in your image), and then put the image inside of a div. When you will change background color of the div, white pixels on the image will "block" a portion of this div background filling the apple with your desired color.