title: Progress Bar or Div over image
body: <p>I would like to simulate a loading effect, so the opacity of the image is changing gradually.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: #aaa;
      padding: 10px;
  }
  
  #progressbar {
      width: 269px;
      height: 269px;
      background-color: #eee;
      clear: both;
  }
  
  #progress {
      background: #fff; /*-- Color of the bar --*/
      height: 269px; 
      width: 0%;
      max-width: 269px;
      float: left;
      -webkit-animation: progress 2s 1 forwards;
      -moz-animation: progress 2s 1 forwards;
      -ms-animation: progress 2s 1 forwards;
      animation: progress 2s 1 forwards;
  }
  
  #pbaranim {
      height: 269px;
      width: 269px;
      overflow: hidden;
      background: url("http://i57.tinypic.com/acyid2.jpg");
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5; 
      opacity: 0.5;
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=55);
      filter: alpha(opacity=55);
  }
  
  @-webkit-keyframes progress { 
      from { }
  
      to { width: 100% }
  }
  
  @-moz-keyframes progress { 
      from { }
  
      to { width: 100% }
  }
  
  @-ms-keyframes progress { 
      from { }
  
      to { width: 100% }
  }
  
  @keyframes progress { 
      from { }
  
      to { width: 100% }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="progressbar"&gt;&lt;div id="progress" &gt;&lt;div id="pbaranim"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my example, the Div is over the image.
  I need the image opacity to become clearer, so the inverse of what I have
  Image should appear from 0 to 100% </p>
  
  <p>Makes sense?</p>
  
  <p>thanks for any help</p>