Build amazing sites with this great collection of components Buy Now

Material box

Material box aka Lightbox

Material box behaves in a similar way as the Lightbox plugin. When a user hovers over an image that can be enlarged, the cursor changes and the image opacity is changed.

When clicked Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.


Material Box

A Material box image is created by assigning the .materialboxed class to an image.

You can add a caption to the zoomed in image through a data-caption atrribute. The second image uses that

Preview the images below in your browser to see the effect in action.

Placeholder Picture
Placeholder Picture

Material Box Grid Gallery

Material box is a material design implementation of the Lightbox plugin. When a user clicks on an image that can be enlarged, Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.

Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture

Material Box with additional effects

Material box is a material design implementation of the Lightbox plugin. When a user clicks on an image that can be enlarged, Material box centers the image and enlarges it in a smooth, non-jarring manner. To dismiss the image, the user can either click on the image again, scroll away, or press the ESC key.

Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture
Placeholder Picture

There is some copyright thingy going here too. Feel free to do whatever you want with it after purchase [except resell without significant modification].