Add Opacity to Part of an Image (CSS) - css

Question

How can one add opacitiy to just the left 100px of a 600px wide image in css? Is there a css property for that?
I have tried to add an overlapping div and add opacity to this div, but that is a pain in the back and does not look as a good solution.

Answer 1

Well i found that overlapping div with position:absolute is the only solution for this because their is no property in css to catch half image.
HTML
<div class="parent">
<div id="opacity_div"></div>
<img class="half_fade" src="http://i.stack.imgur.com/W7mPR.jpg?s=32&g=1">
</div>
CSS
.parent{
position:relative;
}
#opacity_div{
background:#fff;
height:20px;
width:20px;
position:absolute;
top:18px;
left:6px;
opacity:0.5 /* manipulate to desired opacity */
}
img.half_fade {
position:absolute;
top:0;left:0;
z-index:-1000;
}
Example : http://jsfiddle.net/JMBFS/81/
Checkout this question to understand better : https://drupal.stackexchange.com/questions/70025/how-to-apply-opacity-to-just-a-portion-of-the-image/70029

Answer 2

The solution is to use overlay the image element with another image element, using position absolute and clipping (http://codepen.io/anon/pen/jqpwgV).
HTML:
<img src="img.jpg" id="image-overlay" />
<img src="img.jpg" id="image" />
CSS:
#image-overlay{position:absolute;clip: rect(0px,498px,374px,100px);}
#image{opacity:0.5;}
If you want to be future ready. Use clip-path with graceful degradation in your CSS. See code below (or http://codepen.io/anon/pen/zqLdxW).
#image-overlay{position:absolute;
clip: rect(0px,498px,374px,100px);
-webkit-clip-path: inset(0px 0px 0px 100px);
clip-path: inset(0px 0px 0px 100px);
}
#image{opacity:0.5;}