Мануал Создание блока с анимацией | IPB 3.4.x

[#Rips]

Доброе время суток, пользователи Pawno-Info.ru
В данном мануале/уроке я покажу как сделать, блок с анимацией
________________________________________

Спойлер: Вот так выглядит:

________________________________________
И, так приступим. С начало Вы должны перейти в Админ Центр Вашего форума. Перейти во вкладку Внешний вид и выбрать свой стиль.
Когда все перешли ищем вкладку "Список форумов" там выбираем boardIndexTemplate. Когда перешли нажимаем кнопки CTRL + F вводим туда "foreach loop="side_blocks:$side_blocks as $block">", когда Вы уже все нашли

{$block}
			</foreach>

Перед ними вставляем этот код:

<!-- SIDEBAR BLOCK MANUAL BEGIN -->
<div class='ipsSideBlock clearfix'>
	<h2><b>Присоединяйся</b></h2>
	<div class='_sbcollapsable'>
			<div class="_sbcollapsable" style="padding: 10px;"> 
<ul class="item50"> 
<a href="Ссылку"><li class="item55"> 
<div class="item60"> 
<i class="fa fa-site" style=" 
font-size: 40px; margin-bottom: 10px; }; 
"></i> 
Мы Вконтакте 
</div> 
</li></a> 
<a href="Ссылку"><li class="item55"> 
<div class="item60"> 
<i class="fa fa-site" style=" 
font-size: 40px; margin-bottom: 10px; }; 
"></i> 
Наш Сайт 
</div> 
</li></a> 
</ul>
	</div>
</div>
<!-- SIDEBAR BLOCK MANUAL END -->

Дальше переходим в раздел CSS и там выбираем ipb_styles.css и вставляем в самые конец кода:

.item50 {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item55 {
position: relative;
margin: 5px;
padding: 0;
max-width: 200px;
min-width: 100px;
-webkit-box-flex: 1;
-webkit-flex: 1 100px;
-ms-flex: 1 100px;
flex: 1 100px;
height: 100px;
text-align: center;
border-radius: 3px;
border: 2px solid rgba(152, 151, 151, 0.76);
background: rgba(152, 151, 151, 0.76);
cursor: pointer;
}
.item60 {
position: relative;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
color: #fff;
z-index: 10;
}
.item55:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 0;
height: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: .5s ease all, 2s linear -webkit-transform, 0s linear top, 0s linear left;
transition: .5s ease all, 2s linear transform, 0s linear top, 0s linear left;
border-radius: 300px;
background: #708090;
z-index: 1;
}
.item55:hover:before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
border-radius: 0;
-webkit-transition: .5s ease all, .1s linear -webkit-transform, 0s linear top, 0s linear left;
transition: .5s ease all, .1s linear transform, 0s linear top, 0s linear left;
}
<!-- SIDEBAR BLOCK MANUAL END -->

Примечание:
Можно только один блок!
Можете изменять их как вам надо, то есть изменять ссылки,текст и цвет.​