Рекламный блок как на zombr

1. Перейти Admin CP -> Look & Feel -> Select Template -> Board Index > boardIndexTemplate и найти:

<foreach loop="side_blocks:$side_blocks as $block">
                {$block}
            </foreach>

2. Перед ним поместить этот код:

<div class='ipsSideBlock clearfix '>

<div class='_sbcollapsable'>

<div class="grid">
<figure class="effect-sadie">
<img src="http://zombr.org/portal_assets/img/side_qn_download.png" alt="download cs by zombr">
<figcaption>
<h2><span>Скачать CS 1.6</span></h2>
<p>Скачать сейчас!</p>
<a href="http://zombr.org/_counter_strike_1_6.html"></a>
</figcaption> 
</figure>

<figure class="effect-sadie">
<img src="http://zombr.org/portal_assets/img/side_qn_unban.png" alt="unban request">
<figcaption>
<h2>Вас <span>забанили</span>?</h2>
<p>Подайте заявку на разбан!</p>
<a href="http://zombr.org/banlist/"></a>
</figcaption> 
</figure>

<figure class="effect-sadie">
<img src="http://zombr.org/portal_assets/img/side_qn_watchers.png" alt="watcher">
<figcaption>
<h2>Как стать смотрителем?</h2>
<p>Подать заявку прямо сейчас!</p>
<a href="http://zombr.org/forum/6/"></a>
</figcaption> 
</figure>
</div>
</div></div>

3. Сохранить.

4. Перейти Admin -> CPLook & Feel -> Manage Skin Sets & Templates -> Manage Templates in -> Select Template -> и нажмите кнопку Добавить CSS-файла.
5. Назовите его grid
6. Поместите следующий код в нем:

.grid {
overflow: hidden;
margin: 0;
width: 100%;
max-width: 1920px;
list-style: none;
text-align: center;
}
figure.effect-sadie {
-webkit-transition: background 0.35s, -webkit-transform 0.35s;
transition: background 0.35s, transform 0.35s;
}
.grid figure {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: 0 -0.135em 0.600em -0.135em;
background: #3047A3;
text-align: center;
cursor: pointer;
}
figure.effect-sadie img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
opacity: 0.8;
}
.grid figure figcaption, .grid figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.grid figure figcaption {
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
figure a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 0 0 6px 0;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}
figure.effect-sadie figcaption::before, figure.effect-sadie p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie:hover h2 {
color: #fff;
-webkit-transform: translate3d(0,-70%,0) translate3d(0,-70px,0);
transform: translate3d(0,-70%,0) translate3d(0,-70px,0);
}
figure.effect-sadie h2 {
position: absolute;
top: 82%;
left: 0;
width: 100%;
color: #fff;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}
.grid figure h2, .grid figure p {
margin: 0;
}
.grid figure h2 {
font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
figure.effect-sadie figcaption::before, figure.effect-sadie p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}