title: Opacity only at a particular area
body: <p>I want to give opacity for the div only at the bottom left corner.
  Is it possible? how?</p>
  
  <pre><code>&lt;div id="right_img"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css </p>
  
  <pre class="lang-css prettyprint-override"><code>#right_img
  {
       float:right;
       width:600px;
       height:400px;
       margin-top:100px;
       background:url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center;
       opacity:0.6;
       filter:alpha(opacity=60); 
  }
  </code></pre>
  
  <p>If I give opacity to the complete div, image clarity will be lost.</p>