Pergunta
Aqui está a página de teste
http://www.studioteknik.com/html/test-portfolio.html
Não tenho nenhum erro, mas nenhum efeito escorregadio ...
Alguma pista de alguém?
Atualização, Molf corrigiu o problema, essa foi a posição absoluta que fez o truque ... mas agora, quando o texto aparece, o link por baixo não é cliques
A página corrigida está aqui: http://www.studioteknik.com/html/test-portfolio3.html
Solução
Você deve atualizar seu CSS, certifique -se de .image img
está posicionado absolutamente:
.image img {
position: absolute; // added
height: 100%;
width: 100%;
}
Isso fará o slide funcionar. A imagem será exibida fora do ambiente div
, no entanto. Para consertar isso, adicione um overflow: hidden
propriedade para .image
:
.image {
// ...
overflow: hidden; // added
}
Atualizar: dado isso na solução acima, você acaba com texto atras do a .image div
(ou seja, com links não clicáveis), é melhor você deslizar este ao invés da imagem. Em vez do exposto acima, faça o seguinte:
.box {
// ...
overflow: hidden; // added
}
E em seu 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});
});
Observe que agora estamos rastreando o hover
evento no div.box
, e deslize pelo div.image
.
Outras dicas
Funciona com
position:relative;
Além disso, mas você precisa alterar seu js para:
$('div.webpreview').hover(....);
Como não há div com a classe "imagem" em sua página :)
Para link clicável:
ESTILO:
.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>
Também você pode fazer isso com a mudança Z-Index de Div contendo 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");
});