Tutorial :jquery image slide



Question:

here is the test page

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

I got no error, but no hover-slide effect...

any clue anyone ?


Update, molf have fix the problem, that was the absolute position that did the trick.. but, now, when the text show up, the link underneath is NOT CLIKABLE


the corrected page is here : http://www.studioteknik.com/html/test-portfolio3.html


Solution:1

You should update your CSS, make sure .image img is positioned absolutely:

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

This will make the slide work. The image will be displayed outside the surrounding div, though. To fix that, add an overflow: hidden property to .image:

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

Update: given that in the solution above you end up with text behind the .image div (i.e. with non-clickable links), you'd better slide that rather than the image. Instead of the above, do the following:

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

And in your 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});  });  

Note that the we are now tracking the hover event on the div.box, and slide down the div.image.


Solution:2

it works with

position:relative;  

also but you need to change your JS to:

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

as there is no div with class "image" in your page :)

For clickable link:

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>  

Also you can do this with changing z-index of div containing link:

       $('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");          });  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »