如何为我的缩略图添加缩放悬停效果答案

【问题标题】：How do I add a zoom hover effect to my thumbnail如何为我的缩略图添加缩放悬停效果
【发布时间】：2013-08-10 19:40:33
【问题描述】：

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

这就是我的目标：

我基本上是在尝试复制 Fi 正在做什么图像悬停在这里http://blog.f-i.com/

我已在 http://jsfiddle.net/estx4/ 上发布了我当前的标记

谢谢

【问题讨论】：

你的标记没有css
不要在 jSfiddle 中发布PHP。而是发布生成的HTML。

标签： jquery html css

【解决方案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;

}

【讨论】：

【解决方案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
    });
});

【讨论】：