html - Color overlay on shape -
i've got small problem.
i want create overlay effect on picture in following jsfiddle. http://jsfiddle.net/39gud4bh/1/
<div> <img id="bubble" src="http://png-1.findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/speech_bubble.png"> <img src="http://s30.postimg.org/lptvfyod9/speech_bubbleorange.png"> </img> </div> #bubble { }
i want overlay have color #ff9f2d
how possible? been trying litterally find. problem image (might not in jsfiddle) shape transparent background. causes attempts background/foreground filter color recolor whole square instead of shape.
really need help. in advance - thank you!
edit - fiddle has been updated entail desired outcome of css on grey bubble.
this may not exact answer you're looking for, maybe can consider using font awesome. it'll clean, sharp bubble , can resize , color anyway want css. route use svg.
http://jsfiddle.net/wilchow/39gud4bh/5/
.fa-bubble { font-size: 140px; color: #333333; cursor: pointer; } .fa-bubble:hover { color: #ff9f2d; }
Comments
Post a Comment