javascript - 画像ギャラリーで個別のホバー効果 (jQuery + CSS) を同時にトリガーする

Question

ポートフォリオ ギャラリーの作業: flowmedia.dk/new

非アクティブ状態:

サムネイルの上部 2/3 にカーソルを合わせると、画像がグレースケールからカラーに切り替わります。

サムネイルの下 1/3 にカーソルを合わせると、画像のキャプションが表示されます。:

キャプション (jQuery):

jQuery(document).ready(function($) {
    $(document).ready(function(){
        $('.caption').hide();
        $('#portfolio-container .element').hover(function () {
            $('.caption', this).stop().fadeTo('slow', 1.0);
        },
        function () {
            $('.caption', this).stop().fadeTo('slow', 0); 
        });
    });
});

グレースケール (CSS):

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(0%);
    ...
}

ホバー時にキャプションとグレースケールからカラーへの効果を同時にトリガーする方法、またはキャプションでグレースケールからカラーへの効果をトリガーするにはどうすればよいですか?

(サムネイルの任意の場所にカーソルを合わせると、画像がグレースケールからカラーに変わります。)