title: Show Gray Div over the Div with images and text, when mouse over
body: <p>I want to do this: </p>
  
  <p><img src="https://i.stack.imgur.com/1woCr.jpg" alt="enter image description here"></p>
  
  <p>I have a div with item: title, image, some text. When I put mouse over that div I need  this div to became gray, like image 2. I have code like this:</p>
  
  <p>CSS
  <code></p>
  
  <pre><code>.container div {
      display: none;
      width: 250px;
      height: 250px;
  }
  
  .container:hover div {
      display: block;
  }
  
  .graydiv {
      background-image:url(over.png); // transparent gray png
      position: absolute;
      margin-top: -250px; 
  }
  </code></pre>
  
  <p></code></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;img src="someimg.jpg" alt="" /&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;div class="graydiv"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But IE8 don't show gray div...Chrome, Firefox and so on is ok!</p>
  
  <p><strong>Also I need the whole Div to be a link...</strong></p>
  
  <p>So any ideas what to do and what to use?</p>