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
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
.
OTHER TIPS
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");
});