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