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

Im currently using Wordpress to build a portfolio site. I need to create a hover effect that is triggered when a mouse enters either. I'm trying to get a box to display over the image area that contains a permalink saying to "view project" about the specific post whilst the thumbnail slowly zooms in. My site is currently responsive as well so I can't use any fixed widths or heights for this.

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

This is what im aiming for:

这就是我的目标:

Im basically trying to replicate what Fi are doing with there image hovers here http://blog.f-i.com/

我基本上试图复制Fi正在做什么与图像徘徊在这里http://blog.f-i.com/

I've posted my current markup on http://jsfiddle.net/estx4/

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

Thanks

2 个解决方案

#1

here you go...this is pure css based.

在这里你去...这是纯粹的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

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