jquery - レスポンシブ Web サイトの Jquery ロールオーバー効果

Question

新しいレスポンシブ フレームワークを使用してサイトを構築することを検討しています。私はいくつかのテストを行いましたが、標準で非レスポンシブ Web サイトで使用している効果を得ました。これは Jquery ロールオーバーであり、スプライトを使用して画像をグレー/カラーにし、ロールオーバーするとグレーが色にフェードしますホバー時に画像のオンとオフを切り替えるテキスト付き。

私の問題は、レスポンシブサイトの画像の高さがピクセル単位で固定されていないため、これを適応させると、画像が明らかに画像のグレー/カラーの両方の側面を示していることです。% の高さと幅を実行しようとすると、画像の間違った部分がすぐに表示され始めるため、縮小すると明らかにこれは機能しません。

これを回避する方法を知っている人はいますか?サムネイルにこの効果を生成するには、レスポンシブな方法が必要です。アップロードされた例を取得して、これまでに得たものを確認できるようにします。

私のJquery：

$(document).ready(function() {

    $("a.thumbnail").hover(function() { //On hover...

        var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

        //Set a background image(thumbOver) on the <a> tag 
        $(this).find("div.thumbimg").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
        //Fade the image to 0 
        $(this).find("span").stop().fadeTo('fast', 0 , function() {
            $(this).hide() //Hide the image after fade
        }); 
    } , function() { //on hover out...
        //Fade the image to 1 
        $(this).find("span").stop().fadeTo('slow', 1).show();
    });

});

私はここで基本的なことをやっています.Jqueryのオーバーレイには自信がありません. これを適応させるためのアイデア。

EDIT** : http://www.visualdecree.co.uk/test/index.html - テストの簡単なまとめページを示します。うまくいけば、私が何をしているかを示すのに役立ちます。

よろしくM