Div Hover with Caption

Question

我一直在测试用CSS3徘徊的Div ..我用我的所有编码做了一个小提琴，我一直在使用SASS编译它（因为它节省了我写代码和代码行），但我'在这里我粘贴了SASS，我也一直在使用编译器。

我不确定jQuery是否可行，如果你将鼠标悬停在顶部的第一个 div上，它会显示来自'.caption h4 [rel =“grid -title“]'如果你将它从底部悬停它显示'.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/hounder/7gL8U/1/