Elements
These modular elements can be readily used and customized across pages and in different blocks.
Gallery <> show code
<!-- Example: 1 - Icon Circle -->
<div class="card ">
<div class="card_img">
<a href="">
<img class="img-full" src="assets/img/portfolio/p1.jpg" />
<div class="hover-overlay effect-scale">
<div class="overlay-content">
<a href="portfolio-project-details.html" class="icon icon-circle">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="assets/img/portfolio/p1.jpg" data-fancybox="images" class="icon icon-circle">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
<a href="portfolio-project-details.html"><h6 class="overlay-title">Artworks Graphic Design</h6></a>
<span>Branding</span>
</div>
</div>
</a>
</div>
</div>
<!-- Example: 2 - Icon Diamond -->
<div class="card">
<div class="card_img">
<a href="">
<img class="img-full" src="path/to/img" />
<div class="hover-overlay effect-scale">
<div class="overlay-content">
<a href="#" class="icon icon-ract ract45">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="path/to/img" data-fancybox="images" class="icon icon-ract ract45">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
<a href="#"><h6 class="overlay-title">Title Here</h6></a>
<span>Tagline</span>
</div>
</div>
</a>
</div>
</div>
How to use
- Gallery image pop-up is designed using Fancybox Jquery plugin. Read the user documentation properly
- You can call fancybox through data- attribute as shown in the code example.
- You can use your own classes to customize style or overwrite default style properties.
Gallery - Card style <> show code
<!-- Example: 1 - Icon circle -->
<div class="card info-card">
<div class="card_img">
<a href="">
<img class="img-full" src="assets/img/portfolio/p1.jpg" />
<div class="hover-overlay effect-scale">
<div class="overlay-content">
<a href="portfolio-project-details.html" class="icon icon-circle">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="assets/img/portfolio/p1.jpg" data-fancybox="images" class="icon icon-circle">
<i class="fa fa-search-plus" aria-hidden="true"></i>
</a>
</div>
</div>
</a>
</div>
<div class="card-block text-center">
<a href="#"><h6 class="card-title">Title goes here</h6></a>
<span>Tagline</span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, quas aperiam quis laudantium hic at et ipsam necessitatibus! Minima, rem!</p>
<a href="#" class="btn btn-mid btn-primary">Read more</a>
</div>
</div>
<!-- Example: 1 - Icon Diamond -->
<div class="card info-card">
<div class="card_img">
<a href="">
<img class="img-full" src="path/to/img" />
<div class="hover-overlay effect-scale">
<div class="overlay-content">
<a href="#" class="icon icon-ract ract45">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="path/to/img" data-fancybox="images" class="icon icon-ract ract45">
<i class="fa fa-search-plus" aria-hidden="true"></i>
</a>
</div>
</div>
</a>
</div>
<div class="card-block text-center">
<a href="#"><h6 class="card-title">Title goes here</h6></a>
<span>Tagline</span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, quas aperiam quis laudantium hic at et ipsam necessitatibus! Minima, rem!</p>
<a href="#" class="btn btn-mid btn-primary">Read more</a>
</div>
</div>
How to use
- Copy the example code for default style. You can use our own classes to overwrite/change default style properties.
Example: 1
Artworks Graphic Design
BrandingLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, quas aperiam quis laudantium hic at et ipsam necessitatibus! Minima, rem!
Read morePraesentium Harum Ipsam
UI DesignLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, quas aperiam quis laudantium hic at et ipsam necessitatibus! Minima, rem!
Read morePremera Support Agency
Web DesignLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, quas aperiam quis laudantium hic at et ipsam necessitatibus! Minima, rem!
Read moreExample: 2
Trusty Consultancies
web designLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, quas aperiam quis laudantium hic at et ipsam necessitatibus! Minima, rem!
Read moreConsectetur Adipisicing Elit
photographyLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, quas aperiam quis laudantium hic at et ipsam necessitatibus! Minima, rem!
Read moreBlanditiis Error Modi
UI designLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, quas aperiam quis laudantium hic at et ipsam necessitatibus! Minima, rem!
Read more