"Painting" a png image

"Painting" a png image
0

#1

I’d like to know if is possible take a image and kind of paint or change the color with a animation using any framework/library in js or even on CSS3.

It’s like that: There is a variable “x” and the value of this x will be between 0% - 100% and then we will take this value and paint that percentage of the image.

Awful Representation:
1- Normal Pic
2- X = “20%”

I dont know if really need to be a changing color but I’d like to repesent the percentage modyfing the image


#2

So you basically want a layer over a image?


#3

Exactly! hahaha, This Word don’t appeared in my head haha


#4

Well in that case, this might work. Add this css to the div where the layer should be: box-shadow: inset 100px 0 0 0 rgba(0,0,0,0.8). To be honest I am not exactely sure what all the zeros do, but the “100px” is the distance from the right and “rgba(0,0,0,.8)” is the color. With some JS you might be able to translate that into percents


#5

@reynnanviktor another approach that may work is to create separate images and use the CSS z-index property with a fade-in effect to transition from one version of your image to the next. You could make it as smooth as you want depending on how many images you use.


#6

Just one last thing, just to be sure, it is possible in the place of 100px put a variable? that will change accoding the user? This percentage that I was talking about I will get this value from a checkbox.


#7

Well not in the css itself, but with some javascript that should be possible.

Maybe this is possible:
var pixels = whatever number of pixels;
document.getElementById(“divID”).style.boxShadow = “inset " + pixels + " 0 0 0 rgba(0,0,0,0.8)”;


#8

good idea, but I think a layer one will be better for me, My idea is paint the area of a image map to show how much percent this map is covered


#9

Hey, if you have a second I will try if I can make it work with percentages.


#10

Take your time, don’t worry hahah


#11

For this solution you will need to put your image as background image of a div. Hope that’s not a problem? This is what I got: http://codepen.io/benjaminvanzwienen/full/ZOzVxy. In the textbox you can type any number between 0 and 100 (percentage).


#12

Thank you so much it was exactly this I WOULD KISS YOU MAN hahahahha