title: Covering an image using a div element
body: <h3>My Fiddle</h3>
  
  <p><a href="http://jsfiddle.net/yjw46/2/" rel="nofollow">http://jsfiddle.net/yjw46/2/</a></p>
  
  <h3>My Goal</h3>
  
  <p>I have this beautiful wheel of colors as a PNG. (I also have it as an SVG). When one of the colors is clicked, I want the WHOLE circle to change to that color. For example, if red is clicked, I want the whole wheel to turn red instead of colorful.</p>
  
  <h3>How I Intended to do it</h3>
  
  <p>I wanted to have a transparent (in the Fiddle it's semi-transparent, for debugging purposes) div in the shape of a circle (using <code>border-radius</code>) that will be DIRECTLY ON my color-wheel-image. When a color is pressed, I planned for the div to stop being tranparent, and (in a beautiful transition) turn to that color, making it look like the whole wheel has changed color.</p>
  
  <h3>Problem</h3>
  
  <p>I cannot get the div to cover the image.</p>
  
  <h3>So</h3>
  
  <p>I'd be glad to hear either why my technique didn't work, or a better technique, if you have one.</p>