Формы иконок
<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"