Under casual searches, there are many implementations of this desired design pattern, often for the wrong reasons, or not quite implementing what is written on the label. Most involve JavaScript, and most of those, jQuery.
Problem: Why involve the controller (browser/scripting) in a purely view concern?
Problem: Many examples utilize images containing text rendered to a raster image.
Do not do this. It ruins accessibility, e.g. the ability for screen readers to read that content.
Utilize a proper placeholder attribute and style it instead.
Problem: This may obscure the intent behind why this needs to be done, which can be expressed in a more semantic way, following that intent.
Implementing this requires two CSS rules, one matching the element, the other matching the element with the pseudo-class :focus.
This is not technically a placeholder value, but can be an effective way to implement UI design elements, such as gradients, optionally with transition animations.
It is best to not interfere with ordinary operation of placeholder text, and its accessibility implications. We can avoid replacing the placeholder with an image, by making the image a consequence of the placeholder being present.
A possibly more semantic approach, if this is actually the intent. (That placeholder text is shown when empty is ancillary to the fact the required field is invalid.)