Bonjour a tous,
J’aimerai savoir comment l'effet hover sur les images du portfolio de Grafikart est fait, alors si quelqu'un a une idée merci
de m'éclairer.
Cordialement

2 réponses


mespeche
Réponse acceptée

Bonjour à toi,

Alors c'est très simple, il te faut une div qui contient ton image et une div que tu identifie par une classe "cache"

Comme ceci en html :

<div class="vignette">
    <img src="..." alt="..." />
    <div class="cache"></div>
</div>

Ensuite dans ton css, il faut que ta div "vignette" soit en position relative et que ta div "cache" soit en position absolute afin qu'elle se positionne par rapport à la vignette.

Comme ceci en css :

.vignette{
    ...
    ...
    position:relative;
}
.cache{
    ...
    position:absolute;
    top: 0;
    left: 0;
    background: url(...); //Le background correspond à ton masque
}

Ensuite grâce au javascript tu cache la div "cache" et tu gère les événements.

Comme ceci :

$(".vignette .cache").css("opacity",0);
$(".vignette").mouseover(function(){
    $(this).find(".cache").stop().fadeTo(500,1);
});
$(".vignette").mouseout(function(){
    $(this).find(".cache").stop().fadeTo(500,0);
});

Voilà bonne chance ;)

wYm
Auteur

Merci beaucoup pour ton aide