title: Applying CSS filter on only half of image
body: <p>I have a overlying div on my image with <code>filter: grayscale(100%);</code> filling up <code>50%</code> of the containing div but the filter will not apply over my image.</p>
  
  <p>However if I put the image inside my <code>filterBar</code> div it will only make the whole image greyscale. I need the image to be greyscaled in relation to the number rating.</p>
  
  <p>Is this possible to do? </p>
  
  <p><a href="http://codepen.io/noobskie/pen/qadEoL?editors=1100" rel="nofollow">Codepen</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="rating-wrapper-v2 bp-rating row"&gt;
    &lt;div class="col-xs-6"&gt;
      &lt;div class="filterBar"&gt;&lt;/div&gt;
      &lt;img src="https://www.baopals.com/catalog/view/theme/lexus_megashop/image/Baopals-Facebook.png" style="width: 100px;" alt="Baopals Rating" /&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-6"&gt;
      &lt;p&gt;BAOPALS SCORE&lt;/p&gt;
      &lt;span&gt;2.5&lt;/span&gt;
      &lt;span&gt;/&lt;/span&gt;
      &lt;span&gt;5&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.rating-wrapper-v2{
    width:300px;
  }
  .filterBar{
    filter: grayscale(100%);
    position: absolute;
    height: 50%;
    width:100%;
    bottom:0;
    z-index:100;
  }
  </code></pre>