Add Opacity to Part of an Image (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;}