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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
<figure className="hover-scale rounded">
<Link href="#" passHref legacyBehavior>
<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="#" passHref legacyBehavior>
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
<figure className="hover-scale cursor-light rounded">
<Link href="#" passHref legacyBehavior>
<a>
<img src="..." srcSet="...@2x.jpg 2x" alt="" />
</a>
</Link>
</figure>
<figure className="hover-scale cursor-primary rounded">
<Link href="#" passHref legacyBehavior>
<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.
Buy Sandbox