Интерактивное меню - Joomla 3.x: Шаблоны, разметка и макеты вывода

HTML

<div class="uslugi_main" align="center">
         <div class="menu" align="center">
            <a href="naruzhka.html">
                <div class="animate2" align="center">
                <img class="first" src="images/icon_3x6_color.png" />
                <img class="second" src="images/icon_3x6.png" />
                <div class="podstr">
                <h4>Наружная реклама</h4>
                <h5>Эффективный способ заявить о себе!</h5>
                </div>
            </div>
            </a>
            <a href="#">
            <div class="animate2">
                <img class="first" src="images/icon_poligra_color.png" />
                <img class="second" src="images/icon_poligra.png" />
                <div class="podstr">
                <h4>Полиграфия</h4>
                <h5>Медленно, дорого, КАЧЕСТВЕННО!</h5>
                </div>
            </div>
            </a>
            <a href="#">
            <div class="animate2">
                <img class="first" src="images/icon_razrabotka_saytov_color.png" />
                <img class="second" src="images/icon_razrabotka_saytov-01.png" />
                <div class="podstr">
                <h4>Разработка сайтов</h4>
                <h5>Мы делаем - Вы зарабатываете!</h5>
                </div>
            </div>
            </a>
            <a href="#">
            <div class="animate2">
                <img class="first" src="images/icon_produkziya_color.png" />
                <img class="second" src="images/icon_produkziya.png" />
                <div class="podstr">
                <h4>POS - МАТЕРИАЛЫ</h4>
                <h5>Рекламная продукция</h5>
                </div>
            </div>
            </a>
        </div>
    </div>

CSS

.uslugi_main{overflow:hidden;}
.animate2{
  display: inline-block;
  position:relative;
  width: 300px;
  height: 190px;
}
.animate2 img { 
  position:absolute; 
  top:0px;
  left:75px;
}
.animate2 img.first { 
  opacity:0;
  filter:alpha (opacity=0);
}
.animate2:hover img.first {
  opacity:1;
  filter:alpha (opacity=100);
}
.animate2:hover img.second, .animate2 img.second:hover {
  opacity:0;
  filter:alpha (opacity=0);
}
.animate2:hover img.second, .animate2 img.second:hover {
  opacity:0;
  filter:alpha (opacity=0);
  -moz-transition: all 1.5s ease;
  -webkit-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

-webkit-filter: grayscale(50%);
-moz-filter: grayscale(50%);
-ms-filter: grayscale(50%);
filter: grayscale(50%);