Как пользоваться таким добром? Есть куча hover эффектов. Как правильно их ставить? - Joomla 3.x: Шаблоны, разметка и макеты вывода

Всем привет! Добрый человек скинул ссылку - http://gudh.github.io/ihover/dist/ на кучу ховер эффектов, но стыдно признаться я не особо разбираюсь в этом  . Вот к примеру код от туда -
<div class="ih-item circle effect2 left_to_right"><a href="#">
        <div class="img"><img src="images/assets/4.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->

Я куда должен его сунуть? Открыть редактор и поставить на страницу, или засунуть его в  любой файл CSS?
Вот выдрал кусок со своей страницы-
<p style="margin: 0px 0px 21px; padding: 0px; font-size: 16px; line-height: 22px; color: #303030; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;"><span style="color: #800000;"><b><img style="margin: 10px; float: left;" src="images/compred.png" alt="" width="493" height="333" />Прочитав эту статью, Вы узнаете</b></span></p>

Как бы вы сделали? Приведите просто пример пожалуйста! Да я знаю что надо учить CSS, уже начал, но хотелось бы увидеть красивый эффект для собственной мотивации! Заранее благодарен 

 

Здесь не только надо код вставить, но и стили тоже надо подключать...

Здесь не только надо код вставить, но и стили тоже надо подключать...

Код: html

<link rel="stylesheet" href="http://gudh.github.io/ihover/dist/styles/main.css"/>

А можно на примере показать? Если не сложно.

А можно на примере показать? Если не сложно.

Пожалуйста!

Зачем подключать main.css ? Для эффектов надо подключить стили ihover , это файл ihover.css или ihover.min.css . Зачем грузить лишние стили ?

<div class="ih-item circle effect2 left_to_right"><a href="#">
        <div class="img"><img src="images/assets/4.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->

Я куда должен его сунуть? Открыть редактор и поставить на страницу, или засунуть его в  любой файл CSS?
Вот выдрал кусок со своей страницы-
<p style="margin: 0px 0px 21px; padding: 0px; font-size: 16px; line-height: 22px; color: #303030; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;"><span style="color: #800000;"><b><img style="margin: 10px; float: left;" src="images/compred.png" alt="" width="493" height="333" />Прочитав эту статью, Вы узнаете</b></span></p>
 

Сунуть это можно куда Вам надо . Главное соблюсти разметку и заменить адрес картинки на свой .
Выдранный кусок кода с Вашей страницы выглядит жутковато если честно . Его надо удалить и взять только адрес картинки .