Основной курс по Joomla

Как пользоваться таким добром? Есть куча hover эффектов. Как правильно их ставить?

0 Пользователей и 1 Гость просматривают эту тему.
  • 4 Ответов
  • 730 Просмотров
*

Dannik

  • Осваиваюсь на форуме
  • ***
  • 84
  • 0
Всем привет! Добрый человек скинул ссылку - 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, уже начал, но хотелось бы увидеть красивый эффект для собственной мотивации! Заранее благодарен  ^-^

 

*

NewUsers

  • Завсегдатай
  • *****
  • 598
  • 47
Здесь не только надо код вставить, но и стили тоже надо подключать...
Код: html
<link rel="stylesheet" href="http://gudh.github.io/ihover/dist/styles/main.css"/>

*

Dannik

  • Осваиваюсь на форуме
  • ***
  • 84
  • 0
Здесь не только надо код вставить, но и стили тоже надо подключать...
Код: html
<link rel="stylesheet" href="http://gudh.github.io/ihover/dist/styles/main.css"/>
А можно на примере показать? Если не сложно.

*

NewUsers

  • Завсегдатай
  • *****
  • 598
  • 47
А можно на примере показать? Если не сложно.

Пожалуйста!

*

midav

  • Живу я здесь
  • ******
  • 927
  • 113
Зачем подключать 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>
 

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