title: IE Hover Issue with an Image Overlay
body: <p>I have an image and an overlay within an image wrapper. Hovering over the wrapper causes the overlay to go from transparency 0 to 0.8. It works in all browsers but IE. I believe I am using the proper IE filter for opacity. Please take a look at the code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="img-wrap"&gt;
      &lt;img class="profile" src="images/z.jpg"&gt;
      &lt;a href="team-employee-z.html" class="img-overlay team"&gt; &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.img-wrap {
      margin-right: 3px;
      float: left;
      height: 100%;
      overflow: hidden;
      position: relative;
      width: 250px;
  }
  
  .img-overlay {
      text-decoration: none;
      display: none;
      height: 100%;
      background-color: #000;
      color: #fff;
      opacity: 0;
      filter: alpha(opacity = 0);
      position: absolute;
      width: 100%;
      z-index: 100;
  }
  
  .img-overlay.team {
      top: 0;
  }
  
  .img-wrap:hover .img-overlay {
      display: block;
      opacity: 0.80;
      filter: alpha(opacity = 80);
      transition: opacity 0.25s;
      -moz-transition: opacity 0.25s;
      -webkit-transition: opacity 0.25s;
  }
  </code></pre>