anyavacy anyavacy - 5 months ago 14
CSS Question

Add Opacity to Part of an Image (CSS)

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

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 : http://drupal.stackexchange.com/questions/70025/how-to-apply-opacity-to-just-a-portion-of-the-image/70029

Comments