Xoverlay v1.0
Информация
Xoverlay представляет из себя набор CSS стилей, который поможет довольно просто добавлять современные эффекты наведения на ваш сайт. Собрано более 50 эффектов, но если вы будете их комбинировать, то вариантов будет еще на несколько десятков больше - более 150 эффектов.
Замечание:Прежде чем добавить, xoverlay.css, загрузите и добавьте иконочные шрифты Font Awesome.
Формы иконок
<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="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>
class="x-circle x-white"
class="x-square x-white"
class="x-lemon x-white"
class="x-balloon x-white"
class="x-smooth x-white"
Цвета иконок
<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="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>
class="x-circle x-white"
class="x-square x-yellow"
class="x-lemon x-green"
class="x-balloon x-blue"
class="x-smooth x-red"
class="x-smooth x-orange"
Эффекты с caption (текстом)
<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="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>
class="xoverlay x-simple"
class="xoverlay x-simple"
class="xoverlay x-bottom"
class="xoverlay x-bottom"
class="xoverlay x-top"
class="xoverlay x-top"
class="xoverlay x-left"
class="xoverlay x-left"
class="xoverlay x-right"
class="xoverlay x-right"
class="xoverlay x-top-left"
class="xoverlay x-top-left"
class="xoverlay x-top-right"
class="xoverlay x-top-right"
class="xoverlay x-bottom-left"
class="xoverlay x-bottom-left"
class="xoverlay x-bottom-right"
class="xoverlay x-bottom-right"
class="xoverlay x-flip-left"
class="xoverlay x-flip-left"
class="xoverlay x-flip-right"
class="xoverlay x-flip-right"
class="xoverlay x-flip-top"
class="xoverlay x-flip-top"
class="xoverlay x-flip-bottom"
class="xoverlay x-flip-bottom"
class="xoverlay x-wobble-left"
class="xoverlay x-wobble-left"
class="xoverlay x-wobble-right"
class="xoverlay x-wobble-right"
class="xoverlay x-wobble-top"
class="xoverlay x-wobble-top"
class="xoverlay x-wobble-bottom"
class="xoverlay x-wobble-bottom"
class="xoverlay x-fpush-left"
class="xoverlay x-fpush-right"
class="xoverlay x-fpush-top"
class="xoverlay x-fpush-top"
class="xoverlay x-fpush-bottom"
class="xoverlay x-fpush-bottom"
class="xoverlay x-pushfull-left"
class="xoverlay x-pushfull-left"
class="xoverlay x-pushfull-right"
class="xoverlay x-pushfull-right"
class="xoverlay x-pushfull-top"
class="xoverlay x-pushfull-top"
class="xoverlay x-pushfull-bottom"
class="xoverlay x-pushfull-bottom"
class="xoverlay x-imgrotate-left"
class="xoverlay x-imgrotate-left"
class="xoverlay x-imgrotate-right"
class="xoverlay x-imgrotate-right"
class="xoverlay x-zoom"
class="xoverlay x-zoom"
class="xoverlay x-zoom-inout"
class="xoverlay x-zoom-inout"
class="xoverlay x-zoom-rotate"
class="xoverlay x-zoom-rotate"
class="xoverlay x-zoom-rotatey"
class="xoverlay x-zoom-rotatey"
class="xoverlay x-zoom-rotatex"
class="xoverlay x-zoom-rotatex"
Эффекты с иконками
<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>
<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>
class="xoverlay-data x-icon-top-bottom"
class="xoverlay-data x-icon-left-right"
class="xoverlay-data x-icon-zoom"
class="xoverlay-data x-icon-left"
class="xoverlay-data x-icon-right"
class="xoverlay-data x-icon-top"
class="xoverlay-data x-icon-bottom"
class="xoverlay-data x-icon-zoomup"
class="xoverlay-data x-icon-zoomdown"
class="xoverlay-data x-icon-rotatezoom"
class="xoverlay-data x-icon-zoomoutin"
class="xoverlay-data x-icon-allzoomin"
class="xoverlay-data x-icon-allzoomout"
class="xoverlay-data x-icon-left-top-right"
class="xoverlay-data x-icon-left-bottom-right"
class="xoverlay-data x-icon-flip-zoomind"
class="xoverlay-data x-icon-flip-zoomind2"
class="xoverlay-data x-icon-all-slidedown"
class="xoverlay-data x-icon-all-slidetop"
class="xoverlay-data x-icon-all-slideleft"
class="xoverlay-data x-icon-all-slideright"
class="xoverlay-data x-icon-lr-zoom"