Rounded Image
Circle Image
Thumbnail Image
<img src="img/about_us_1.jpg" class="img-rounded img-fluid" alt="" /> <img src="img/about_us_3.jpg" class="img-circle img-fluid" alt="" /> <img src="img/about_us_2.jpg" class="img-thumbnail img-fluid" alt="" />
Hover Zoom In
<div class="img-wrapper">
<div class="img-caption ecadaZoomIn">
<a href="img/gallery/img01_270x270.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
<h5><a href="javascript:void(0);">Vituperatoribus</a></h5>
<a href="javascript:void(0);" class="img-categorie">Web design</a>
</div>
<img src="img/gallery/img01_270x270.jpg" class="img-fluid" alt="" />
</div>
Hover Zoom Down
<div class="img-wrapper">
<div class="img-caption ecadaZoomInDown">
<a href="img/gallery/img11_270x270.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
<h5><a href="javascript:void(0);">Vituperatoribus</a></h5>
<a href="javascript:void(0);" class="img-categorie">Web design</a>
</div>
<img src="img/gallery/img11_270x270.jpg" class="img-fluid" alt="" />
</div>
Hover Roll
<div class="img-wrapper">
<div class="img-caption ecadaRollIn">
<a href="img/gallery/img03_270x270.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
<h5><a href="javascript:void(0);">Vituperatoribus</a></h5>
<a href="javascript:void(0);" class="img-categorie">Web design</a>
</div>
<img src="img/gallery/img03_270x270.jpg" class="img-fluid" alt="" />
</div>
Hover Rotate
<div class="img-wrapper">
<div class="img-caption ecadaRotateIn">
<a href="img/gallery/img04_270x270.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
<h5><a href="javascript:void(0);">Vituperatoribus</a></h5>
<a href="javascript:void(0);" class="img-categorie">Web design</a>
</div>
<img src="img/gallery/img04_270x270.jpg" class="img-fluid" alt="" />
</div>
Thumbnail with content
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="thumbnail">
<img src="img/gallery/img01_470x640.jpg" alt="Thumbnail with content">
<div class="caption">
<h5>Project Title</h5>
<p>
[...]
</p>
<p><a href="javascript:void(0);" class="btn-e btn-e-primary btn-sm" role="button">Button</a></p>
</div>
</div>
Thumbnail colored
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="thumbnail thumbnail-red">
<img src="img/gallery/img01_470x640.jpg" class="img-fluid" alt="Thumbnail colored">
<div class="caption">
<h5>Project Title</h5>
<p>
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p><a href="javascript:void(0);" class="btn-e btn-e-default btn-sm" role="button">Read More <i class="fa fa-plus"></i></a></p>
</div>
</div>
</div>
<div class="thumbnail thumbnail-black">
<img src="img/gallery/img02_470x640.jpg" class="img-fluid" alt="Thumbnail colored">
<div class="caption">
<h5>Project Title</h5>
<p>
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p><a href="javascript:void(0);" class="btn-e btn-gray btn-sm" role="button">Read More <i class="fa fa-plus"></i></a></p>
</div>
</div>
</div>
<div class="thumbnail thumbnail-gray">
<img src="img/gallery/img03_470x640.jpg" class="img-fluid" alt="Thumbnail colored">
<div class="caption">
<h5>Project Title</h5>
<p>
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p><a href="javascript:void(0);" class="btn-e btn-e-default btn-sm" role="button">Read More <i class="fa fa-plus"></i></a></p>
</div>
</div>
</div>
<div class="thumbnail thumbnail-blue">
<img src="img/gallery/img04_470x640.jpg" class="img-fluid" alt="Thumbnail colored">
<div class="caption">
<h5>Project Title</h5>
<p>
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p><a href="javascript:void(0);" class="btn-e btn-e-default btn-sm" role="button">Read More <i class="fa fa-plus"></i></a></p>
</div>
</div>
</div>
Thumbnail colored with hover efects
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Project Title
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="thumbnail thumbnail-yellow">
<div class="img-wrapper">
<div class="img-caption ecadaZoomIn">
<a href="img/gallery/img01_470x640.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
<h5><a href="javascript:void(0);">Project Title</a></h5>
<a href="javascript:void(0);" class="img-categorie">Web design</a>
</div>
<img src="img/gallery/img01_470x640.jpg" class="img-fluid" alt="Thumbnail colored with hover efects" />
</div>
<div class="caption">
<h5>Project Title</h5>
<p>
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p><a href="javascript:void(0);" class="btn-e btn-e-default btn-sm" role="button">Read More <i class="fa fa-plus"></i></a></p>
</div>
</div>
<div class="thumbnail thumbnail-primary">
<div class="img-wrapper">
<div class="img-caption ecadaZoomInDown">
<a href="img/gallery/img02_470x640.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
<h5><a href="javascript:void(0);">Project Title</a></h5>
<a href="javascript:void(0);" class="img-categorie">Web design</a>
</div>
<img src="img/gallery/img02_470x640.jpg" class="img-fluid" alt="Thumbnail colored with hover efects" />
</div>
<div class="caption">
<h5>Project Title</h5>
<p>
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p><a href="javascript:void(0);" class="btn-e btn-e-default btn-sm" role="button">Read More <i class="fa fa-plus"></i></a></p>
</div>
</div>
<div class="thumbnail thumbnail-light-green">
<div class="img-wrapper">
<div class="img-caption ecadaRollIn">
<a href="img/gallery/img03_470x640.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
<h5><a href="javascript:void(0);">Project Title</a></h5>
<a href="javascript:void(0);" class="img-categorie">Web design</a>
</div>
<img src="img/gallery/img03_470x640.jpg" class="img-fluid" alt="Thumbnail colored with hover efects" />
</div>
<div class="caption">
<h5>Project Title</h5>
<p>
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p><a href="javascript:void(0);" class="btn-e btn-e-default btn-sm" role="button">Read More <i class="fa fa-plus"></i></a></p>
</div>
</div>
<div class="thumbnail">
<div class="img-wrapper">
<div class="img-caption ecadaRotateIn">
<a href="img/gallery/img04_470x640.jpg" data-pretty="prettyPhoto" class="zoomer"><i class="fa fa-search"></i></a>
<h5><a href="javascript:void(0);">Project Title</a></h5>
<a href="javascript:void(0);" class="img-categorie">Web design</a>
</div>
<img src="img/gallery/img04_470x640.jpg" class="img-fluid" alt="Thumbnail colored with hover efects" />
</div>
<div class="caption">
<h5>Project Title</h5>
<p>
Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p><a href="javascript:void(0);" class="btn-e btn-e-default btn-sm" role="button">Read More <i class="fa fa-plus"></i></a></p>
</div>
</div>
Audio
<div class="col-md-6 col-sm-6">
<div class="large-music-frame">
<iframe title="First music example" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/273008240&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="large-music-frame">
<iframe title="Second music example" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/296019410&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
<div class="col-md-12 col-sm-12 margin-top-20">
<div class="small-music-frame">
<iframe title="Third music example" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/266680604&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>