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

Answer 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.