Add A Layer On Top Of An Image That Has Priority Over The Image

I'm making a Chrome extension which stops all requests of images and will allow you to click on the broken image icon in order to load the image without the blocking. This is in or

Solution 1:

Add this css to your html

<style type="text/css">
  //container div 
     .container{
      width:300px;
      position:relative; 
      }
 //image css property
  .imageHolder{
      position:absolute; 
      left:0px; 
      top:0px; 
      width:100%; 
      height:100%; 
      z-index:10px;
      }
  //    overlay css property
  .imageOverlay{
      position: absolute; 
      z-index:11px; 
      top:0px; 
      left:0px; 
      width:100%; height:100%; 
      text-align:center;
      }
  </style>

This is your html code will be

<div class="container">

    <img src="myimage.png" class="imageHolder" />

    <div class="imageOverlay"> Load </div>

</div>

Hope it helps... Thanks.