• 2459
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Вот подыскал интересную статью и решил выложить у себя с подробным описанием настройки.
Итак приступим.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. с исходником,распаковываем и запускаем файл index.html,это для просмотра и выбора эффекта.
2.Закачиваем в папку с нашим шаблоном папку CSS и Font из исходника,там в папке CSS нам нужны только xoverlay.css и font-awesome.css,остальные файлы заливать не надо.
3.Подключаем в head наши стили

Код:
<link rel="stylesheet" href="{{ tpl_url }}/css/xoverlay.css">
<link rel="stylesheet" href="{{ tpl_url }}/css/font-awesome.css">
4.Сама разметка представляет, что-то похожее на это:
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-1.png" />
<div class="xoverlay-box">
<div class="xoverlay-data">
...
...
...
</div>
</div>
</div>
</div>
5.Добавляем иконку или описание внутрь нашей разметки
1.Добавляем icon
Код:
<span class="x-circle x-white"><a href="#"><i class="fa fa-facebook"></i></a></span>
2.Добавляем описание
Код:
<h2>Заголовок</h2>
<p>It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout</p>
<a class="x-more" href="#">Подробнее</a>
6.Форма иконок,

в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-1.png" />
<div class="xoverlay-box">
<div class="xoverlay-data">
<span class="x-circle x-white"><a href="#"><i class="fa fa-facebook"></i></a></span>
...
...
</div>
</div>
</div>
</div>
7.Цвета иконок,

в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-3.png" />
<div class="xoverlay-box">
<div class="xoverlay-data">
<span class="x-circle x-white"><a href="#"><i class="fa fa-facebook"></i></a></span>
...
...
</div>
</div>
</div>
</div>
8.Эффекты с описанием (текстом),

в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-1.png" />
<div class="xoverlay-box">
<div class="xoverlay-data">
...
</div>
</div>
</div>
</div>
9.Эффекты с иконками,

в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<div class="col-md-3">
<div class="xoverlay x-simple">
<img class="x-img-main" src="images/picture-1.png" />
<div class="xoverlay-box">
<div class="xoverlay-data x-icon-top-bottom">
...
</div>
</div>
</div>
</div>
10.Вроде все понятно,просто комбинируй классы и получай эффекты,если что не понятно пишите в комментариях.

Можешь почитать и вот эту статейку "Выпадающее меню на CSS"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element