Geniux

Lightbox - Default

No animated lightbox

Default

With Border

Box Shadow

Show Code

<section>
  <div class="container">
    <div class="row">

      <div class="col-sm-4 col-sm-4 col-xs-12">
        <h4>Default</h4>
        <!-- Default Lightbox -->
        <div class="hover-box-default">
          <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-default" data-title="Click the right half of the image to move forward.">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image"></a>
        </div>
      </div>

      <div class="col-sm-4 col-sm-4 col-xs-12">
        <h4>With Border</h4>
        <!-- Border Lightbox -->
        <div class="hover-box-border">
          <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-default" data-title="Click the right half of the image to move forward.">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image"></a>
        </div>
      </div>

      <div class="col-sm-4 col-sm-4 col-xs-12">
        <h4>Box Shadow</h4>
        <!-- Box Shadow Lightbox -->
        <div class="hover-box-shadow">
          <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-default" data-title="Click the right half of the image to move forward.">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image"></a>
        </div>
      </div>

    </div><!-- /.row -->
  </div><!-- /.container -->
</section>

Lightbox - Hover Effect

Animated lightbox with caption and icons

Centered Caption

Project Name

Show Code

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Centered Caption -->
        <div class="hover-box">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay pic-wrapper">
            <div class="pic-caption pic-line-after">
              <div>
                <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-1" data-title="Click the right half of the image to move forward.">
                  <h6>Project Name</h6>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Centered Caption -->
        <div class="hover-box">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay pic-wrapper">
            <div class="pic-caption pic-line-after">
              <div>
                <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-1" data-title="Click the right half of the image to move forward.">
                  <h6>Project Name</h6>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- /row -->
  </div><!-- /.container -->
</section>

Caption fade from bottom

Project Name

Sub heading for the project

Project Name

Sub heading for the project

Show Code

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Caption fade from bottom -->
        <div class="hover-box">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay pic-wrapper">
            <div class="pic-btm-caption">
              <div>
                <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-1" data-title="Click the right half of the image to move forward.">
                  <h6>Project Name</h6>
                  <p>Sub heading for the project</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Caption fade from bottom -->
        <div class="hover-box">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay pic-wrapper">
            <div class="pic-btm-caption">
              <div>
                <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-1" data-title="Click the right half of the image to move forward.">
                  <h6>Project Name</h6>
                  <p>Sub heading for the project</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- /row -->
  </div><!-- /.container -->
</section>

Centered Icons

Show Code

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Centered Icons -->
        <div class="hover-box">
          <img class="example-image" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay pic-wrapper">
            <div class="pic-caption">
              <div class="link-btns">
                <a href="#"><i class="fa fa-link" aria-hidden="true"></i></a>
                <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-2" data-title="Click the right half of the image to move forward."><i class="fa fa-search" aria-hidden="true"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Centered Icons -->
        <div class="hover-box">
          <img class="example-image" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay pic-wrapper">
            <div class="pic-caption">
              <div class="link-btns">
                <a href="#"><i class="fa fa-link" aria-hidden="true"></i></a>
                <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-2" data-title="Click the right half of the image to move forward."><i class="fa fa-search" aria-hidden="true"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- /row -->
  </div><!-- /.container -->
</section>

Centered Button

View Project

Show Code

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Centered Button -->
        <div class="hover-box">
          <img class="example-image" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay pic-wrapper">
            <div class="pic-caption">
              <div class="link-btns">
                <a class="gnx-btn btn-small btn-border-white no-margin example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-2" data-title="Click the right half of the image to move forward." role="button">View Project</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <!-- Centered Button -->
        <div class="hover-box">
          <img class="example-image" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay pic-wrapper">
            <div class="pic-caption">
              <div class="link-btns">
                <a class="gnx-btn btn-small btn-border-white no-margin example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-2" data-title="Click the right half of the image to move forward." role="button">View Project</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- /row -->
  </div><!-- /.container -->
</section>

Slide Up Button

Project Name

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

View Project

Show Code

<section>
  <div class="container">
    <div class="row">

      <div class="col-sm-12">
        <h4>Slide Up Button</h4>
        <!-- Slide Up Button On Hover -->
        <div class="hover-box">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg" data-rjs="2" alt="Image">
          <div class="box-overlay-2 pic-wrapper">
            <div class="pic-btm-caption2">
              <div>
                <h6>Project Name</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
                <a class="gnx-btn btn-small btn-border-white pic-btm-button example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-hover-3" data-title="Click the right half of the image to move forward." role="button">View Project</a>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /.row -->
  </div><!-- /.container -->
</section>

Lightbox Carousel

Project #1

2016/03

Project#2

2016/08

Project#3

2017/01

Project#4

2017/04

Project#5

2017/08

Project#6

2018/02

Show Code

<section>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <!-- Lightbox Carousel -->
        <div id="lightboxCarousel" class="owl-carousel owl-theme">

          <!-- Start item 1 -->
          <div class="item">
            <div class="hover-box">
              <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="">
              <div class="box-overlay pic-wrapper">
                <div class="pic-btm-caption">
                  <div class="text-center">
                    <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-set-lightbox" data-title="Click the right half of the image to move forward.">
                      <h6 class="outlined">Project#1</h6>
                      <p><span>2016/03</span></p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End item 1 -->

          <!-- Start item 2 -->
          <div class="item">
            <div class="hover-box">
              <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="">
              <div class="box-overlay pic-wrapper">
                <div class="pic-btm-caption">
                  <div class="text-center">
                    <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-set-lightbox" data-title="Click the right half of the image to move forward.">
                      <h6 class="outlined">Project#2</h6>
                      <p><span>2016/08</span></p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End item 2 -->

          <!-- Start item 3 -->
          <div class="item">
            <div class="hover-box">
              <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="">
              <div class="box-overlay pic-wrapper">
                <div class="pic-btm-caption">
                  <div class="text-center">
                    <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-set-lightbox" data-title="Click the right half of the image to move forward.">
                      <h6 class="outlined">Project#3</h6>
                      <p><span>2017/01</span></p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End item 3 -->

          <!-- Start item 4 -->
          <div class="item">
            <div class="hover-box">
              <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="">
              <div class="box-overlay pic-wrapper">
                <div class="pic-btm-caption">
                  <div class="text-center">
                    <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-set-lightbox" data-title="Click the right half of the image to move forward.">
                      <h6 class="outlined">Project#4</h6>
                      <p><span>2017/04</span></p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End item 4 -->

          <!-- Start item 5 -->
          <div class="item">
            <div class="hover-box">
              <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="">
              <div class="box-overlay pic-wrapper">
                <div class="pic-btm-caption">
                  <div class="text-center">
                    <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-set-lightbox" data-title="Click the right half of the image to move forward.">
                      <h6 class="outlined">Project#5</h6>
                      <p><span>2017/08</span></p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End item 5 -->

          <!-- Start item 6 -->
          <div class="item">
            <div class="hover-box">
              <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" alt="">
              <div class="box-overlay pic-wrapper">
                <div class="pic-btm-caption">
                  <div class="text-center">
                    <a class="example-image-link" href="assets/images/demo-img/gnx-900x600.jpg" data-lightbox="example-set-lightbox" data-title="Click the right half of the image to move forward.">
                      <h6 class="outlined">Project#6</h6>
                      <p><span>2018/02</span></p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- End item 6 -->

        </div>
      </div>
    </div><!-- /.row -->
  </div><!-- /.container -->
</section>

# Shortcodes 1

# Shortcodes 2

# Shortcodes 3

# Shortcodes 4

Lightbox - Default

Default

With Border

Box Shadow

Lightbox - Hover Effect

Centered Caption

Project Name

Project Name

Caption fade from bottom

Project Name

Project Name

Centered Icons

Centered Button

Slide Up Button

Project Name

Lightbox Carousel

Project #1

Project#2

Project#3

Project#4

Project#5

Project#6