jquery - 如何为我的缩略图添加缩放悬停效果

Question

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

这就是我的目标：

我基本上是在尝试复制 Fi 正在做什么图像悬停在这里http://blog.fi.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

检查这个小提琴。

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