[Помогите] Верстка css

Уважаемые вебмастеры, нужна помощь.

Имеется слайдер на сайте. Он имеет такой вид:


Нужно что бы он приобрел такой вид:


Движок сайта DLE 9.6
Вот код HTML:

HTML:

<div class="slider">
{custom category="1,2,3,4,5" template="slider" aviable="main" from="0" limit="12" cache="no"}
<div style="clear: both;"></div>
</div>

Шаблон slider:

HTML:

<div class="slider-item">
<div class="slider-item-small">
<img src="{image-1}" alt="{title}" />
<div class="slider-item-small-dark"></div>
</div>
<div class="slider-item-big">
<a href="{full-link}"><img src="{image-1}" alt="scrin" /></a>
<h2>{title}</h2>
</div>
</div>

Стиль slider:

Код:

    .slider {
        position: relative;
        height: 355px;
        margin: 0 0 10px 0;
        padding: 0 0 0 502px;
        overflow: hidden;
    }
   
        .slider-item {
            float: left;
            width: 111px;
            height: 111px;
            margin: 0 0 10px 13px;
        }
       
            .slider-item-small {
                overflow: hidden;
                width: 111px;
                height: 111px;
                position: relative;
                border: 1px #353535 solid;
                cursor: pointer;
            }
           
                .slider-item-small img {
                    min-width: 111px;
                    height: 111px;
                    border: 0;
                }
               
                .slider-item-small-dark {
                    width: 100%;
                    height: 100%;
                    background: url(../images/slider-item.png);
                    position: absolute;
                    left: 0;
                    top: 0;
                    cursor: pointer;
                }
               
            .slider-item-big {
                position: absolute;
                left: 0;
                top: 0;
                width: 502px;
                height: 355px;
                overflow: hidden;
                display: none;
            }
           
            .active-slider .slider-item-big {
               
            }
           
            .active-slider .slider-item-small  {
                border: 1px #fff solid;
            }
           
            .slider-item-hover .slider-item-small {
                border: 1px #fff solid !important;
            }
           
            .active-slider .slider-item-small-dark, .slider-item-hover .slider-item-small-dark {
                display: none;
            }
           
                .slider-item-big img {
                    position: absolute;
                    left: 0;
                    top: -50px;
                    width: 502px;
                    min-height: 355px;
                    border: 0;
                }
               
                .slider-item-big h2 {
                    position: absolute;
                    font-size: 18px;
                    text-transform: uppercase;
                    left: 10px;
                    bottom: 5px;
                    font-weight: normal;
                    background: url(../images/slider-item.png);
                    padding: 10px;
                    color: #fff;
                }

У кого какие мысли?