Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Follow Us
Your Cart
Image Hover
Use our custom hover styles to add hover state to your images and elements.
Tooltip
When you use tooltip hover then you need call the useTooltip() custom hook
import Link from 'next/link';
<figure className="itooltip hover-scale rounded" title="Some Title Quam Sit Ornare">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
Overlay
Some Title
Some Title
Some Description
Some Title
Some Description
import Link from 'next/link';
<figure className="overlay overlay-1 hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-top mb-0">Some Title</h5>
</figcaption>
</figure>
<figure className="overlay overlay-2 hover-scale color rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-top mb-1">Some Title</h5>
<p className="from-bottom">Some Description</p>
</figcaption>
</figure>
<figure className="overlay overlay-3 overlay-gradient-1 hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-left mb-1">Some Title</h5>
<p className="from-left mb-0">Some Description</p>
</figcaption>
</figure>
<figure className="overlay overlay-3 overlay-gradient-2 hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-left mb-1">Some Title</h5>
<p className="from-left mb-0">Some Description</p>
</figcaption>
</figure>
<figure className="overlay overlay-3 overlay-gradient-3 hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-left mb-1">Some Title</h5>
<p className="from-left mb-0">Some Description</p>
</figcaption>
</figure>
<figure className="overlay overlay-3 overlay-gradient-4 hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-left mb-1">Some Title</h5>
<p className="from-left mb-0">Some Description</p>
</figcaption>
</figure>
<figure className="overlay overlay-3 overlay-gradient-5 hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-left mb-1">Some Title</h5>
<p className="from-left mb-0">Some Description</p>
</figcaption>
</figure>
<figure className="overlay overlay-3 overlay-gradient-6 hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-left mb-1">Some Title</h5>
<p className="from-left mb-0">Some Description</p>
</figcaption>
</figure>
<figure className="overlay overlay-3 overlay-gradient-7 hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
<figcaption>
<h5 className="from-left mb-1">Some Title</h5>
<p className="from-left mb-0">Some Description</p>
</figcaption>
</figure>
Simple
import Link from 'next/link';
<figure className="lift rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
<figure className="hover-scale rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
Cursor
import Link from 'next/link';
<figure className="hover-scale cursor-dark rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
<figure className="hover-scale cursor-light rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
<figure className="hover-scale cursor-primary rounded">
<Link href="#">
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
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.
