Comment ajouter un effet de survol de zoom à ma miniature

Question

J'utilise actuellement Wordpress pour créer un site de portfolio. Je dois créer un effet de survol qui est déclenché lorsqu'une souris entre dans l'un ou l'autre. J'essaye d'obtenir une boîte pour montrer au-dessus de la zone d'image qui contient un permalink en disant «voir le projet» au sujet de la publication spécifique tandis que la miniature agrandit lentement. Mon site est actuellement réactif ainsi je ne peux pas employer n'importe quel fixe largeurs ou hauteurs pour cela.

C'est ce que im visant:

Im essayant essentiellement de reproduire ce que Fi font avec là l'image plane ici http://blog.f-i.com/

J'ai posté mon code en cours sur http://jsfiddle.net/estx4/

Merci

Answer 1

h Avant d'y aller ... c'est une base de css pure.

http://jsfiddle.net/2pBG6/

.loop-item { 
-webkit-transform:translate3d(0, 0, 0); 
-moz-transform:translate3d(0, 0, 0); 
-ms-transform:translate3d(0, 0, 0); 
-o-transform:translate3d(0, 0, 0); 
transform:translate3d(0, 0, 0); 
overflow:hidden; 
position:relative; 

}

Answer 2

Cocher cette fiddle.

jQuery

$(function() { 
    $(this).find(".perma").hide(); //to hide the permalink on load 
    $(".post-wrap li").hover(function() { 
     $(this).find(".perma").fadeIn("slow"); //show link 
     $(this).find(".img").addClass("blur"); //make the image look out of focus 
    }, function() { 
     $(this).find(".perma").fadeOut("slow"); //hide link 
     $(this).find(".img").removeClass("blur"); //display image in normal state 
    }); 
});