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.

I'd do it with a clipping masks and absolute positioned pseudo elements. — Bram Vanroy, Apr 22 '16 at 12:29

score 2 · Accepted Answer · edited Apr 13 '17 at 12:46

2

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="https://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

edited Apr 13 '17 at 12:46

Community

1
1

answered Apr 22 '16 at 12:30

Gaurav Aggarwal

9,809
6
36
74

This answer is wrong. I am sorry. There is a CSS solution in the form of the 'clip' and 'clip-path' properties. The 'clip' property can be found here: http://www.w3schools.com/cssref/pr_pos_clip.asp and has excellent browser support. The 'clip-path' property can be found here: http://caniuse.com/#feat=css-clip-path and still has very limited browser support. – Mr. Hugo Apr 22 '16 at 13:47
@JoostS Clip Property is already deprecated bro https://developer.mozilla.org/en/docs/Web/CSS/clip and what will you do for IE browser support – Gaurav Aggarwal Apr 23 '16 at 07:54
1

The 'clip' property is in the CSS2.1 specification and MDN states that "... the clip-path property replaces the now deprecated clip property". So please change your answer to a correct one! If you have an opinion about using them, please be clear about it. Write something like: "There are two properties, but I would not use them because..." – Mr. Hugo Apr 23 '16 at 08:44

score 2 · Answer 2 · edited Jun 18 '16 at 02:34

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;}

[`clip` is deprecated](https://developer.mozilla.org/en/docs/Web/CSS/clip), and [`clip-path` has bad browser support](http://caniuse.com/#feat=css-clip-path). — Vucko, Apr 22 '16 at 12:39

Add Opacity to Part of an Image (CSS)

2 Answers2