title: css image mask overlay
body: <p>I'm trying to get a transparent png frame image to hover over an img tag to create the look of a frame over it. I've tried multiple different approaches and none seem to work.</p>
  
  <p>The latest method I used was <a href="http://www.cssbakery.com/2009/06/background-image.html" rel="nofollow noreferrer">http://www.cssbakery.com/2009/06/background-image.html</a> this doesn't seem to work either.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="filler"&gt;
      &lt;div class="filler-picture"&gt;
          &lt;img src="../../media/img/test.jpg" alt="test" /&gt;
          &lt;div class="filler-mask"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.filler {
  
      padding-left:20px;
      height:361px;
      width:559px;
      float:left;
  
  }
  
  .filler-mask {
  
      background: url('..img/filler.png') no-repeat;
      position: absolute;
      left:0; top:0;
      height:361px;
      width:559px;
  
  }
  
  .filler-picture {
  
      z-index: 0;
      background: url('..img/test.jpg') no-repeat;
      position: relative;
      height: 361px;
      width: 559px;
      display: block;
  
  }
  </code></pre>
  
  <p>Does anyone have any idea why this isn't working. </p>