1

現在ワードプレスを使ってポートフォリオサイトを作っています。マウスが入ったときにトリガーされるホバー効果を作成する必要があります。サムネイルがゆっくりとズームインしている間、特定の投稿について「プロジェクトを表示」するパーマリンクを含む画像領域にボックスを表示しようとしています。このための幅または高さ。

これは私が目指しているものです：

ここに画像の説明を入力

私は基本的に、Fiがここにある画像ホバーで何をしているのかを再現しようとしていますhttp://blog.fi.com/

現在のマークアップをhttp://jsfiddle.net/estx4/に投稿しました

ありがとう

4

2 に答える 2

2

どうぞ... これは純粋な 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;

}

于 2013-08-10T11:32:46.007 に答える
1

このフィドルを確認してください。

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
    });
});
于 2013-08-10T11:34:19.517 に答える