title: Overlay a part of an (not a square) image with css
body: <p>I'm trying to add an overlay to an image to represent the &quot;progress&quot; a user has done to complete a task - so the overlay's height should increase with time (percentege done).
  Just creating a simple overlay is easy enough, I just wrapp the image and add another div below to contain the overlay with an absolute position of the wrapper div.</p>
  <p>Something like this
  HTML:</p>
  <pre><code>&lt;div class=&quot;list&quot;&gt;    
      &lt;div class=&quot;badge-wrapper&quot;&gt;
          &lt;img src=&quot;http://www.clipartlord.com/wp-content/uploads/2014/02/police-badge2.png&quot; alt=&quot;badge&quot; /&gt;
          &lt;div class=&quot;badge-progress&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.list .badge-wrapper {
      position: relative;
      display: inline-block;
      margin: 15px;
      width: 75px;
      height: 75px;
  }
  .list .badge-wrapper img {
      width: 100%;
      height: 100%;
  }
  .list .badge-wrapper .badge-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 30%;
      background: rgba(50, 250, 50, 0.5);
  }
  </code></pre>
  <p>My problem is that my image is not a square, and I what I want is only the picture to be overlayd, not the background of the wrapper, but the image it self.</p>
  <p>Am I making sense? :)
  I've got a fiddle prepared for anyone who likes to educate me. The fiddle demonstrates the behavoir I don't want. The overlay should be contained to the image only. Is this possible?</p>
  <p><a href="https://jsfiddle.net/anup1986/awd477k5/" rel="nofollow noreferrer">Fiddle</a></p>