l'image jquery slide

Question

est ici la page de test

http://www.studioteknik.com/html/test-portfolio.html

Je suis pas d'erreur, mais pas d'effet hover-slide ...

toute idée de qui que ce soit?

---

mise à jour, Molf ont résoudre le problème, qui était la position absolue qui a fait l'affaire .. mais, maintenant, quand le texte apparaissent, le lien ne CLIKABLE sous

---

la Page corrigée est ici: http://www.studioteknik.com/html/test-portfolio3.html

Answer 1

Vous devez mettre à jour votre CSS, assurez-vous .image img est positionné absolument:

.image img { 
    position: absolute; // added 
    height: 100%; 
    width: 100%; 
} 

Cela fera fonctionner la diapositive. L'image sera affichée à l'extérieur de l'div, cependant. Pour corriger cela, ajoutez une overflow: hidden propriété à .image:

.image { 
    // ... 
    overflow: hidden; // added 
} 

---

Mise à jour: étant donné que dans la solution ci-dessus vous vous retrouvez avec le texte derrière le .image div (ie avec des liens non cliquables), vous feriez mieux de glisser que plutôt que l'image. Au lieu de ce qui précède, procédez comme suit:

.box { 
    // ... 
    overflow: hidden; // added 
} 

Et dans votre javascript:

$('div.box').hover(function() { 
    $(this).find(".image").animate({top:'200px'},{queue:false,duration:500}); 
}, function() { 
    $(this).find(".image").animate({top:'0px'},{queue:false,duration:500}); 
}); 

Notez que le nous suivons maintenant l'événement hover sur le div.box, et glisser vers le bas du div.image.

Answer 2

il fonctionne avec

position:relative; 

aussi, mais vous devez changer votre JS:

$('div.webpreview').hover(....); 

comme il n'y a pas div avec classe "image" dans la page :)

Pour le lien cliquable:

STYLE:

.webpreview img { 
    height: 100%; 
    position:relative; 
    overflow:hidden; 
    width: 100%; 
    z-index:100;//note this 
} 

.box .linkDiv{ 
     top:-300px; 
     position:absolute; 
     overflow:hidden; 
     z-index:200; 
} 

JS:

$(document).ready(function() { 
$('div.box').hover(
     function(){ 
      $('div.webpreview',$(this)).find("img").animate(
         {top:'200px'},{queue:false,duration:1000}); 
      $("div.linkDiv", $(this)).animate({top:'0px'}, 
         {queue:false, duration:500}); 
     }, 

     function(){ 
      $('div.webpreview',$(this)).find("img").animate(
         {top:'0px'},{queue:false,duration:1000}); 
      $("div.linkDiv",$(this)).animate({top:'-300px'}, 
         {queue:false, duration:500}); 
     } 
     ); 
}); 

HTML:

<div class="box"> 
<div class="linkDiv"> 
    <strong>Client :</strong> Sous le charme des érables<strong><br> 
     Manda : </strong>Conception et réalisation<br> 
     <strong>Adresse : <a href="http://www.souslecharme.ca/" 
      target="_blank">www.souslecharme.ca</a></strong> 
</div> 
    <div class="webpreview"><img src="test-portfolio_files/souslecharme.jpg"></div> 
</div> 

vous pouvez aussi le faire avec le changement z-index de div contenant le lien:

 $('div.box').hover(
     function(){ 
      $('div.webpreview',$(this)).find("img").animate(
         {top:'200px'},{queue:false,duration:1000}); 
      $("div.linkDiv", $(this)).css("z-index","200"); 
     }, 

     function(){ 
      $('div.webpreview',$(this)).find("img").animate(
         {top:'0px'},{queue:false,duration:1000}); 
      $("div.linkDiv", $(this)).css("z-index","50"); 
     });