Add opacity to part of image (CSS)

Question

How can add opacitiy only to the left 100px expanded 600px image in css? css property exist for this?

I tried adding an overlapping div and adding opacity to this div , but this is a back pain and does not look like a good solution.

Answer 1

Well, I found that overlapping a div with position:absolute is the only solution for this, because they don't have a property in css to catch a 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 better understand: https://drupal.stackexchange.com/questions/70025/how-to-apply-opacity-to-just-a-portion-of-the-image/70029

Answer 2

The solution is to overlay the image element on another image element using the absolute position 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 prepared for the future. Use a clip path with graceful degradation in CSS. See the 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;}