Image Hover

Use our custom hover styles to add hover state to your images and elements.

Instructions

Call the useLightBox() hook on the top of component to enable lightbox functionality.

Use data-glightbox attribute to enable lightbox functionality on your image and video links.

To group images together, use data-gallery="group-name" attribute. This will enable navigation between images that have the same attribute value.

Image & Caption

This div will be used as the image description. HTML is supported.

View example's code

<a href="#" data-glightbox data-gallery="g1">
  Link
</a>

<a href="#" data-glightbox="title: Title; description: Description" data-gallery="g1">
  Link
</a>

<a href="#" data-glightbox="title: Title; description: .caption1" data-gallery="g1">
  Link
</a>
<div className="glightbox-desc caption1">
  <p className="mb-0">This div will be used as the image description. HTML is supported.</p>
</div>

Video

View example's code


<a href="Vimeo Link" data-glightbox data-gallery="g2">Link</a>
<a href="YouTube Link" data-glightbox data-gallery="g2">Link</a>
<a href=".mp4 Link" data-glightbox data-gallery="g2">Link</a>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox

Image Hover

Instructions

Image & Caption

Image

Simple Caption

Advanced Caption

Video

Vimeo

YouTube

HTML5

Think unique and be creative. Make a difference with Sandbox.

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Image Hover

Instructions

Image & Caption

Image

Simple Caption

Advanced Caption

Video

Vimeo

YouTube

HTML5

Think unique and be creative. Make a difference with Sandbox.