How can I apply brightness effect only to the part of a image?

+1 vote
asked Jul 12, 2015 by husten

Here's DEMO @ JS FIDDLE

If I want to apply this brightness effect only to 30px from the very bottom of the image. How can I change my code?

HTML

Before Effect<br />
    <img src="https://i.ytimg.com/vi/Zlot0i3Zykw/mqdefault.jpg">
    <br />
    <br />
    <br />
After Effect<br />
    <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);">

1 Answer

+2 votes
answered Jul 12, 2015 by gopalraju

Try wrapping the image with an overlay div than using brightness.

Fiddle: https://jsfiddle.net/pgetv64u/1/

.overlay{
    position:relative;
    display:inline-block;
}

.overlay:after{
    position:absolute;
    content:'';
    display:block;
    top:0;
    left:0;
    right:0;
    bottom:30px;
    background:rgba(0,0,0,.5);
}
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...