Preview

Base

Caption

Caption text

Icon

Animation

Usage

<a class="img-box" href="#">
    <img src="image.jpg" alt="">
</a>

<a class="img-box img-box-caption" href="#">
    <img src="image.jpg" alt="">
    <span>Caption text</span>
</a>

<a class="img-box" href="#">
    <img src="image.jpg" alt="">
    <i class="im-paper-plane"></i>
</a>

<a class="img-box img-scale" href="#" data-anima="fade-left" data-trigger="hover" data-hidden="true">
    <img src="image.jpg" alt="">
    <i class="im-paper-plane anima"></i>
</a>

Installation

<script src="themekit/scripts/imagesloaded.min.js"></script>

Settings

Name Type Description
Lightbox CSS To show a large image on click add the class lightbox to the component. For more details visit the lightbox page.
Icons lists CSS Font Awesome Icons Mind
Images adjustment -- The framework resize and center the images automatically to fit the container. This feature is powered by the Images Loaded plugin.
Gray effect CSS To set a gray effect to ab image add the class img-grayscale to the component.
PNG CSS If you're using a PNG image with transparent background Add the class img-png to the component to remove the dark overlay and maintain the original image sizes.
Image animation CSS Add one of the following classes to the component to apply an animation to the image on mouse hover: img-scale,img-scale-rotate,img-pulse,img-pulse-horizontal. For more details visit the animations page.
Icon animation -- Add the attributes data-anima="animation-name" data-trigger="hover" data-hidden="true" to the component and the class anima to the icon. For the animations list and for more details visit the animations page.
Animations
Lightbox
Media box
Images Loaded