tags:

views:

1150

answers:

2

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

+3  A: 

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.

molf
It was that simple... you made my day, thanks !... why without the absolute it dont work ?, any idea ?
marc-andre menard
The top property has no effect for elements that are not positioned absolutely or relatively. This is per the CSS specs.
molf
WORK GREEEEEEEAT thanks...
marc-andre menard
A: 

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");
        });
TheVillageIdiot
it was a test to see if the word image was the proble (as a protected word not beening use in css), i am back to the image class !..
marc-andre menard
i am pretty sure your solution work great.. but molf figure out a solution with just swaping the trigger, wich is fine for me... i will ry you way, but i will keep it simple, thanks !
marc-andre menard