title: jquery/html/css making a image appear in the middle with an opaque background
body: <p>hi guys im new with web programming using html, css, javascript and jquery. i have this code:</p>
  
  <p>HTML : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;My test Site&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="cssTest.css"&gt; 
   &lt;script src="js/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id = "divMain"&gt;
  &lt;div id="div1"&gt;
      &lt;a href="#" title="Image1"&gt;&lt;img src = "1.jpg" disabled="disabled"&gt;&lt;/a&gt;  
      &lt;a href="#" title="Image1"&gt;&lt;img src = "2.jpg" disabled="disabled"&gt;&lt;/a&gt;
      &lt;a href="#" title="Image1"&gt;&lt;img src = "3.jpg" disabled="disabled"&gt;&lt;/a&gt;
  &lt;/div&gt; 
  &lt;div id="div2"&gt;
      &lt;a href="#" title="Image1"&gt;&lt;img src = "4.jpg" disabled="disabled"&gt;&lt;/a&gt;
      &lt;a href="#" title="Image1"&gt;&lt;img src = "5.jpg" disabled="disabled"&gt;&lt;/a&gt;    
  &lt;/div&gt;         
  &lt;/div&gt;
  &lt;div id="div3"&gt;
      &lt;div class="myCanvas" width=100% height=100%; &gt;&lt;/div&gt;               
  &lt;/div&gt;    
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS : </p>
  
  <pre><code>$(document).ready (function(){
      $("a").click(function(){
              $(".myCanvas").fadeIn();
              $(".myCanvas").html ($(this).html());
      }); 
  });
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>body{
  background-color: grey;
  }
  
  #div1,#div2{
      border:solid;
      border-color: red;
  }
  
  #div1 img{
  position: relative;
  border: solid;
  border-color: blue;
  margin:5px;
  z-index:1;
  }
  
  #div2 img{
  position: relative;
  border: solid;
  border-color: blue;
  z-index:1;
  }
  
  #div3{
  background-color:black;
  position: relative;
  position-align: center;
  top:-500px;
  z-index:2
  }
  
  .myCanvas{
  position: relative;
  background: solid;
  background-color: grey;
  opacity: 0.5;
  width:100%;
  height:100%;
  display: block;
  z-index:3;
  }
  </code></pre>
  
  <p>what I am trying to do is whenever i click on an image i would like to make the image appear in the middle with an opaque background that will be covering the other images.</p>
  
  <p>Thank you guys for the help and sorry for the noob question.</p>