css - ホバーと画像を使用してクイックリンク div を作成し、4 行に並べる

Question

トップ画像とURLにカーソルを合わせたクイックリンクのdivを取得しようとしています。

画像がdivの上に浮かぶように混乱し続けます。

たとえば、何を達成しようとしているのか

例

多分誰かが私を正しい方向に向けることができますありがとう:D

 #snelmenu
        {
            padding:0;
            margin:0;
            list-style-type:none;
            font-size:12px;
            color:#717171;

        }

        #snelmenu li
        {
            border-bottom:1px solid #eeeeee;
        }

        #snelmenu li a:hover
        {
            color:White;
            background-color:#219FD1;
        }

        #snelmenu a:link
        {
            color:#717171;
            text-decoration:none;
            display:block;
            padding: 7px 10px;
        }

        #snelmenu a:hover
        {
            color:White;
        }



.snelmenubox{
    background: #ffffff;
    border: 1px solid #ddd;
    display: block;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.2);
       -moz-box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.2);
            box-shadow:0px 1px 1px 0px rgba(180, 180, 180, 0.2);
    padding: 25px 25px 20px 25px;
}

.snelmenubox h1,
.snelmenubox h2,
.snelmenubox h3,
.snelmenubox h4,
.snelmenubox h5,
.snelmenubox h6,
.snelmenubox p{
    margin:0 0 10px 0;
}

.snelmenubox .snelmenubox-img{
    margin:-26px -26px 25px -26px;
    -webkit-border-radius:5px 5px 0px 0px;
       -moz-border-radius:5px 5px 0px 0px;
            border-radius:5px 5px 0px 0px;
    overflow: hidden;
}
.snelmenubox .snelmenubox-img img{
    width:100%;
    max-width:100%;
    height:auto;
}