4840
- 0
Вот подыскал интересную статью и решил выложить у себя с подробным описанием настройки.
Итак приступим.
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">
Код:
<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>
1.Добавляем icon
Код:
<span class="x-circle x-white"><a href="#"><i class="fa fa-facebook"></i></a></span>
Код:
<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>
в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<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>
в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<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>
в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<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>
в демо под картинками прописан класс каждого эффекта,вам просто нужно ставить нужный класс в коде указанном ниже
Код:
<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>
Можешь почитать и вот эту статейку "Опять не работает Флеш кнопка,достало!!!!"
Это тоже интересно
- 31.08.14Стильные CSS3 hover эффекты
- 08.11.13Адаптивное навигационное меню
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.