jQuery - transition rough fadeIn en vol stationnaire

Question

J'ai une div avec un peu de contenu, puis en stationnaire, j'essaye de faire FadeIn une autre partie dessus tout en tapant sur le conteneur div. Le problème après le survol du conteneur div va à l'opacité 0 puis revient à la valeur que j'ai définie. On dirait que ça clignote. J'ai besoin d'être lisse.
Voici mon code:

en direct jsFiddle: http://jsfiddle.net/alok108/Y7hgs/28/

HTML

<div class="campaign-box"> 
    <a href="#"class="like-box"> 
     <div class="box"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      <span>34234983-80</span> 
     </div>  
     <span> </span> 
    </a> 
</div> 

jQuery

$(function() { 
    $(".campaign-box span:last").hide(); 
    $(".campaign-box").hover(function() { 
     $(".box").css("opacity", 0.5); 
     $(".campaign-box span:last").fadeIn("fast");   
    }, function() {   
     $(".box").css("opacity", 1); 
     $(".campaign-box span:last").fadeOut("slow"); 
    }); 
}); 

CSS

.campaign-box { 
    display: block; 
    height: 100px; 
    width: 200px; 
    border: solid black; 
} 
.box { 
    display:block; 
    height:100%; 
    width:100%; 
    float:left; 
} 
.box + span { 
    display: block; 
    height:100%; 
    width:100%; 
    background: #f1f1f1 url("http://0.tqn.com/d/personalweb/1/G/w/O/FacebookLikeButton1.jpg") no-repeat; 
    z-index:5; 
} 

Answer 1

Il suffit d'ajouter la position: relative; z-index ne fait rien à moins qu'une position autre que statique soit définie.

.box + span { 
    display: block; 
    height:100%; 
    width:100%; 
    position: relative; 
    background: #f1f1f1 url("http://0.tqn.com/d/personalweb/1/G/w/O/FacebookLikeButton1.jpg") no-repeat; 
    z-index:5; 
}