title: How can I apply brightness effect only to the part of a image?
body: <p>Here's <a href="https://jsfiddle.net/pgetv64u/" rel="nofollow">DEMO @ JS FIDDLE</a>  </p>
  
  <p>If I want to apply this brightness effect only to 30px from the very bottom of the image.
  How can I change my code?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>Before Effect&lt;br /&gt;
      &lt;img src="https://i.ytimg.com/vi/Zlot0i3Zykw/mqdefault.jpg"&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
  After Effect&lt;br /&gt;
      &lt;img src="https://i.ytimg.com/vi/Zlot0i3Zykw/mqdefault.jpg" style="
       -webkit-filter: brightness(0.5);
       -moz-filter: brightness(0.5);
       -o-filter: brightness(0.5);
       -ms-filter: brightness(0.5);
       filter: brightness(0.5);"&gt;
  </code></pre>