jquery - キャプション付きのDivホバー

Question

私はCSS3でDivホバリングをテストしてきました..すべてのコーディングをいじり、SASSを使用してコンパイルしました（コードの行と行を書くのを節約するため）が、それを貼り付けましたSASS ここでは、コンパイラも使用しています。

jQuery が適しているかどうかはわかりません。上から最初のdiv にカーソルを合わせると、「.caption h4[rel="grid-title"]」に由来する H4 要素が表示され、カーソルを合わせると下から「.cross」要素が表示されます。div自体にカーソルを合わせて、それらを一緒に適用したかったのです。

/* ----- TYPOGRAPHY ----- */
%typography {
    font-family: $main-font;
    @include font-size(12);
    color: $main-fontcolour;
}

body {
    @extend %typography;
}
/* ----- PAGE ELEMENTS ----- */

.maincontainer {
    @include container;
}

section .centre {
    @include row;
}

.spacer {
    @include spacer;
}

// Extenders
%photoc {
    padding: 20px;
    font-weight: bold;
    text-align: center;
}
// Wraps Around Photo
.photo-wrapper {
    margin: 0;
    padding: 0;
    @include relative;
    max-height: 320px;
    overflow: hidden;
    float: left;
    @include columns (4);

            & .caption {
                background-color: rgba(177, 177, 177, 0);
                height: 0;
                min-height: 100%;
                min-width: 100%;
                @include notl;
                background-position: 50% -100%;
                background-repeat: no-repeat;
                @extend %photoc;
                @include transition(all, 300ms, ease-in-out);
                @include absolute;

                &:hover {
                    background-color: rgba(177, 177, 177, 0.3);
                    background-position: 50% 50%;
                    background-repeat: no-repeat;

                       img {
                           max-height: 100%;
                           @include transition(all, 300ms, ease-in-out);
                           }
                   }

        }
}

.caption .cross {
    @include absolute;
    @include notl;
    @include minper;
    background-image: url("http://suitabledesign.co/experiment/img/cross.png");
    background-repeat: no-repeat;
    background-position: center -200%;
        &:hover {
            background-position: center center;
            @include transition (all, .25s, ease-in-out)
        }
}

.caption h4[rel="grid-title"] {
    color: rgba(255, 255, 255, 1);
    @include font-size(14);
    @include absolute;
    @include notl;
    @include minper;
    @include translateY(-100px);

        &:hover {
            @include translateY(0px);
            @include transition (all, .25s, ease-in-out);
            top: 0;
    }
}

私が得ることができる助けをいただければ幸いです:)

編集：申し訳ありませんが、フィドルのリンクを忘れてしまいました.. http://jsfiddle.net/houder/7gL8U/1/