如何为缩略图添加缩放悬停效果

Question

我目前正在使用Wordpress来构建投资组合网站。我需要创建一个鼠标进入时触发的悬停效果。我正试图在图像区域上显示一个框，其中包含一个永久链接，说明关于特定帖子的“查看项目”，同时缩略图会慢慢放大。我的网站目前也有响应，所以我不能使用任何固定的宽度或高度。

这就是我的目标：

我基本上试图复制Fi正在做的事情，图像悬停在http://blog.f-i.com/

我已在http://jsfiddle.net/estx4/

上发布了我当前的标记

由于

Answer 1

这里你去...这是纯粹的基于CSS。

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

选中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
    });
});