title: jQuery Hovery Opacity Blinking
body: <p>I'm trying to create a hover effect which brings the underlying div to the front.</p>
  
  <p><strong>Bringing the underlying div to the front is already solved through z-index.  But my opacity change is causing blinking.  It SHOULD stay at 0% when the user is hovering over it, then change back to 100% when they move their cursor off of it.  Does anybody know what I'm doing wrong?</strong></p>
  
  <p>The underlying div is .under and the div on top is .img</p>
  
  <pre><code>#portfolio_content .img a { }
  #portfolio_content .img a:hover { }
  #portfolio_content .img {
      display:block;
      float:left;
      height:210px;
      margin:0 35px 35px 0!important;
      overflow:hidden;
      padding:0;
      width:307px
  }
  #portfolio_content .img img {
      display:block;
      position:absolute!important;
      overflow:hidden;
      z-index:3!important
  }
  #portfolio_content .img img:hover { z-index:1!important }
  #portfolio_content .img .title, #portfolio_content .img .title a {
      font-size:22px;
      margin:100px 0 10px 0;
      float:left!important;
      width:307px;
      text-align:center;
      position:relative!important
  }
  .desc {
      font-size:13px;
      display:block;
      text-align:center!important;
      margin:0 auto!important;
      width:307px
  }
  .under {
      z-index:2!important;
      display:inline;
      position:absolute;
      width:307px;
      height:210px;
      background:transparent
  }
  .under:hover { z-index:4!important }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>&lt;!-- Hover Opacity --&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $("#portfolio_wrap .img img").hover(function(){
          $(this).fadeTo("slow", 0.0); // This should set the opacity to 100% on hover
      },function(){
          $(this).fadeTo("slow", 1.0); // This should set the opacity back to 60% on mouseout
  });
  });
  &lt;/script&gt;
  </code></pre>