Component

Image boxes

IMAGE BOX INTRODUCTION


Examples

Top Left (default)
Bottom Left
Top Right
Bottom Right
Center

Usage

<!-- IMAGE BOX --> 
<a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-large.png">
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
</a>
<!-- IMAGE BOX WITH THUMBNAIL --> 
<a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/thumb-large.png">
    <span><img src="http://www.framework-y.com/images/thumb-wide.png" alt="" /></span>
</a>
<!-- CIRCLE IMAGE BOX --> 
<a class="img-box lightbox circle" href="http://www.framework-y.com/images/thumb-large.png">
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
</a>
<!-- CIRCLE IMAGE BOX WITH THUMBNAIL --> 
<a class="img-box lightbox thumbnail circle" href="http://www.framework-y.com/images/thumb-large.png">
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
</a>
<!-- OUTER CAPTION --> 
<a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-large.png">
    <span><img src="http://www.framework-y.com/images/thumb-wide.png" alt="" /></span>
    <span class="caption">
        Lorem ipsum dolor sit amet consectetur adipiscing
    </span>
</a>
<!-- OUTER CAPTION WITH THUMBNAIL --> 
<a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/thumb-large.png">
    <span><img src="http://www.framework-y.com/images/thumb-wide.png" alt="" /></span>
    <span class="caption">
        Lorem ipsum dolor sit amet consectetur adipiscing
    </span>
</a>
<!-- INNER CAPTION --> 
<a class="img-box lightbox inner" href="http://www.framework-y.com/images/thumb-large.png">
    <span><img src="http://www.framework-y.com/images/thumb-wide.png" alt="" /></span>
    <span class="caption-box">
        <span class="caption">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>
<!-- INNER CAPTION WITH THUMBNAIL --> 
<a class="img-box lightbox thumbnail inner" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>
<!-- CIRCLE OUTER CAPTION -->  
<a class="img-box lightbox circle" href="http://www.framework-y.com/images/thumb-large.png">
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
</a>
<div class="caption caption-out">
    Lorem ipsum dolor sit amet consectetur adipiscing
</div>
<!-- CIRCLE INNER CAPTION --> 
<a class="img-box lightbox circle inner" href="http://www.framework-y.com/images/thumb-large.png">
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    <span class="caption">
        Lorem ipsum dolor sit amet consectetur adipiscing
    </span>
</a>
<!-- CIRCLE INNER CAPTION WITH THUMBNAIL-->
<a class="img-box lightbox circle inner thumbnail" href="http://www.framework-y.com/images/thumb-large.png">
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    <span class="caption">
        Lorem ipsum dolor sit amet consectetur adipiscing
    </span>
</a>
<!-- BASE WITH ICON --> 
<a class="img-box lightbox" href="http://www.framework-y.com/images/thumb-large.png">
    <i class="fa fa-film"></i>
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
</a> 
<!-- INNER CAPTION THUMBNAIL WITH ICON -->
<a class="img-box lightbox thumbnail inner i-top-right" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-photo"></i>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>
<!-- CIRCLE BASE WITH ICON --> 
<a class="img-box lightbox circle inner i-center" href="http://www.framework-y.com/images/thumb.pngg">
    <i class="fa fa-camera"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
</a>
<!-- CIRCLE INNER CAPTION THUMBNAIL WITH ICON -->
<a class="img-box lightbox circle inner thumbnail i-center" href="http://www.framework-y.com/images/thumb.png">
    <i class="fa fa-file-audio-o"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    <span class="caption">
        Lorem ipsum dolor sit amet consectetur adipiscing
    </span>
</a>
<!-- TOP LEFT --> 
<a class="img-box lightbox " href="http://www.framework-y.com/images/thumb-large.png">
    <i class="fa fa-camera"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
</a>
<!-- BOTTOM LEFT --> 
<a class="img-box lightbox i-bottom" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-camera"></i>
        <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    </span>
</a>                           
<!-- TOP RIGHT -->
<a class="img-box lightbox i-top-right" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-camera"></i>
        <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    </span>
</a>                            
<!-- BOTTOM RIGHT --> 
<a class="img-box lightbox i-bottom-right" href="http://www.framework-y.com/images/thumb-large.png">
    <i class="fa fa-camera"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
</a>
<!-- CENTER --> 
<a class="img-box lightbox i-center" href="http://www.framework-y.com/images/thumb-large.png">
    <i class="fa fa-camera"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
</a>

Main settings

Name Type Description
Lightbox CSS class To show a lightbox on click add class lightbox to image box object.
Plugin dependency

This feature require Magnific Popup Plugin (../scripts/jquery.magnific-popup.min.js and ../scripts/magnific-popup.css)

Lightbox documentation here
Thumbnail CSS class Add class thumbnail to image box object. Example: <a class="img-box thumbnail" href="#"> ... </a>.
Icon position CSS class You can set 4 icon positions by add position class to image box object. Example: <a class="img-box i-center" href="#"> ... </a>.
Class name Description
-- Top left position (default)
i-bottom Bottom left position
i-top-right Top right position
i-bottom-right Bottom right position
i-center Center position
Icons Mixed You can change the icons by edit <i class="fa fa-icon-name"></i> codes.
Icons are a feature of Font Awesome. Complete icons list here
Images position and sizing HTML Plugin Images Loaded listen images loading and trigger a function on load complete. Use this plugin to auto center vertically and horizontally the image within img-box container, image will be also resized to fetch the height and width of img-box container. This plugin is auto activated for image box component.

You can manually call the images rendering with $('#target-container .img-box').renderLoadedImgs();. Replace #target-container with the ID of container of image box components you want to render, all image box components within this container will be processed.
Plugin dependency

This feature require Images Loaded Plugin (../scripts/imagesloaded.min.js)

Images Loaded documentation here
Gray effect CSS class To set gray effect to a image add class grayscale to img-box object.
PNG hover CSS class To set remove the dark overlay on mouse hover add class png-over to the container of the image box component.

IMAGE BOX ANIMATIONS


Examples


Usage

<!-- EXAMPLE 1 -->
<a class="img-box lightbox img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
</a>
<!-- EXAMPLE 2 -->
<a class="img-box thumbnail lightbox img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
    <span><img src="http://www.framework-y.com/images/thumb-wide.png" alt="" /></span>
</a>
<!-- EXAMPLE 3 -->
<a class="img-box lightbox thumbnail img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
    <span><img src="http://www.framework-y.com/images/thumb-wide.png" alt="" /></span>
    <span class="caption">
        Lorem ipsum dolor sit amet consectetur adipiscing
    </span>
</a>
<!-- EXAMPLE 4 -->
<a class="img-box lightbox thumbnail inner img-scale-up" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>
<!-- EXAMPLE 1 -->
<a class="img-box lightbox" data-anima="fade-left" data-trigger="hover" data-anima-out="hide" href="http://www.framework-y.com/images/thumb-large.png">
    <i class="fa fa-film anima"></i>
    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
</a>
<!-- EXAMPLE 2 -->   
<a class="img-box lightbox thumbnail inner" data-anima="fade-left" data-trigger="hover" data-anima-out="hide" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-camera-retro anima"></i>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>                     
<a class="img-box lightbox thumbnail inner img-scale-up" data-anima="fade-left" data-trigger="hover" data-anima-out="hide" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-camera-retro anima"></i>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>           
<!-- EXAMPLE 1 -->  
<a class="img-box lightbox circle inner i-center img-scale-up" data-anima="fade-left" data-trigger="hover" data-anima-out="hide" href="http://www.framework-y.com/images/thumb.png">
    <i class="fa fa-camera anima"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
</a>
<!-- EXAMPLE 2 -->  
<a class="img-box lightbox circle inner thumbnail i-center img-scale-up" data-anima="fade-left" data-trigger="hover" data-anima-out="hide" href="http://www.framework-y.com/images/thumb.png">
    <i class="fa fa-file-audio-o anima"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    <span class="caption">
        Lorem ipsum dolor sit amet consectetur adipiscing
    </span>
</a>
<!-- EXAMPLE 1 --> 
<a class="img-box lightbox thumbnail inner img-scale-up" data-anima="fade-left" data-trigger="hover" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-camera-retro anima"></i>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>
<!-- EXAMPLE 2 --> 
<a class="img-box lightbox thumbnail inner img-scale-up" data-anima="fade-bottom" data-trigger="hover" data-anima-out="hide" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-camera-retro anima"></i>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption anima">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>
<!-- EXAMPLE 3 --> 
<a class="img-box lightbox thumbnail inner img-scale-up" data-anima="fade-bottom" data-trigger="hover" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-camera-retro anima"></i>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption anima anima-pulse-vertical">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>
<!-- EXAMPLE 4 --> 
<a class="img-box lightbox thumbnail inner img-scale-up" data-anima="pulse-fast" data-trigger="hover" href="http://www.framework-y.com/images/thumb-large.png">
    <span>
        <i class="fa fa-camera-retro"></i>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </span>
    <span class="caption-box">
        <span class="caption">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </span>
    </span>
</a>                  

Main settings

Name Type Description
Animations Mixed The animations are a feature of Animations component.
Component dependency

This feature require Animations component (../css/animations.css)

Animations documentation here
Simple animation CSS class To animate a image box you need to add the animation class you want with the img- prefix before the class name, the animations list is available on animation page.
Example: <a class="img-box img-scale-up" href="../images/large/large_wide_1.jpg"><img src="..."></a> for animation scale-up. Supported animation classes are:
Name Class name
Scale img-scale-up
Scale 2X img-scale-up-2x
Scale Rotate img-scale-rotate
Icon animation CSS class To animate the icon use the inner animation target feature of animation page. Add the animation code data-anima="fade-bottom" data-trigger="hover" data-anima-out="hide" to the image box and add class anima to the icon code.
Icon and image animation CSS class To animate both icon and image of a image box you need to combine the two features described above, see examples for more details.

ADVANCED IMAGE BOX


Examples

Advanced box title

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ...

Advanced box title

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Category | 25 dec 2015

Hello World

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Category | 25 dec 2015

SECOND TITLE EXAMPLE

Congue voluptates odit exercitation voluptate quaeratea dictumst quas imperdiet leo posuere vehicula ligula varius viverra nec erat voluptatum sem ultrices. Illum iure distinctio quas qui ut convallis debitis praesentium.

Advanced box title

25 May 2016

SECOND TITLE EXAMPLE

Congue voluptates odit exercitation voluptate quaeratea dictumst quas imperdiet leo posuere vehicula ligula varius viverra nec erat voluptatum sem ultrices. Illum iure distinctio quas qui ut convallis debitis praesentium.

Advanced box title

25 May 2016

SECOND TITLE EXAMPLE

Congue voluptates odit exercitation voluptate quaeratea dictumst quas imperdiet leo posuere vehicula ligula varius viverra nec erat voluptatum sem ultrices. Illum iure distinctio quas qui ut convallis debitis praesentium.

Advanced box title

25 May 2016

Side content image box

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


Enter now

Side content image box

Category | 25 dec 2015

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Side content box

Category | 25 dec 2015

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

IMAGE BUTTONS BOX EXAMPLE

Tempor incididunt sed

IMAGE BUTTONS BOX EXAMPLE

Tempor incididunt sed

IMAGE BUTTONS BOX EXAMPLE

Tempor incididunt sed

The begion of a new age

Tempor incididunt sed

Advanced dreams for you

Tempor incididunt sed


Installation

<link rel="stylesheet" href="../css/image-box.css">

Usage

<div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
    <i class="fa fa-camera-retro anima"></i>
    <a href="#" class="img-box lightbox anima-scale-up anima">
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </a>
    <div class="caption">
        <h2>Advanced box title</h2>
        <p>
            ...
        </p>
        <p class="sub"> ... </p>
    </div>
</div>
<div class="adv-img-double-content">
    <div class="img-box adv-img adv-img-half-content" data-anima="fade-bottom" data-trigger="hover" data-anima-out="hide">
        <i class="fa fa-clock-o anima anima-fade-left"></i>
        <a class="img-box img-fade-bottom" href="#">
            <img alt="" src="http://www.framework-y.com/images/thumb-wide.png">
        </a>
        <div class="caption anima">
            <h3> ... </h3>
            <p>
              ...
            </p>
        </div>
    </div>
    <div class="caption-bottom">
        <h2> ... </h2>
        <p> ... </p>
    </div>
</div>                   
<div class="img-box adv-img adv-img-side-content i-top-right" data-anima="fade-left" data-trigger="hover">
    <i class="fa fa-camera-retro anima"></i>
    <a class="img-box anima-scale-up anima" href="#">
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </a>
    <div class="caption">
        <h2>Side content image box</h2>
        <p>
            ...
        </p>
        <hr class="space s" />
        <a class="anima-button circle-button btn btn-sm white" href="#"><i class="fa fa-long-arrow-right"></i>Enter now </a>
    </div>
</div>                   
<div class="img-box adv-img adv-img-full-content" data-anima="fade-top" data-trigger="hover" data-anima-out="hide">
    <div class="img-box anima-scale-up anima">
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </div>
    <a href="#" class="caption-bg img-box anima">
        <div class="caption">
            <div class="inner">
                <i class="fa fa-pagelines anima main-icon"></i>
                <h2> ... </h2>
                <p class="sub"> ... </p>
            </div>
        </div>
    </a>
</div>                 
<div class="img-box adv-img adv-img-button-content" data-anima="fade-left" data-trigger="hover" data-anima-out="hide">
    <a class="img-box anima-scale-up anima">
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </a>
    <div class="caption">
        <div class="inner">
            <h2>IMAGE BUTTONS BOX EXAMPLE</h2>
            <p class="sub">Tempor incididunt sed</p>
            <a href="#"><i class="fa fa-link text-m circle anima"></i></a>
            <a class="lightbox" href="../images/large/large_wide_10.jpg">
                <i class="fa fa-search text-m circle anima-fade-right anima"></i>
            </a>
        </div>
    </div>
</div>                        
<div class="img-box adv-img adv-img-down-text">
    <a class="img-box img-scale-up lightbox i-center" href="http://www.framework-y.com/images/thumb-wide.png">
        <div class="caption">
            <i class="fa fa-plus"></i>
        </div>
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </a>
    <div class="caption-bottom">
        <h2><a href="#">The begion of a new age</a></h2>
        <p>Tempor incididunt sed</p>
    </div>
</div>                        
<div class="img-box adv-img adv-img-classic-box white">
    <div class="img-box">
        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </div>
    <a href="http://www.framework-y.com/images/thumb-wide.png" class="caption img-box lightbox">
        <div class="caption-inner">
            <h2>BOOKCASE DESIGN</h2>
            <p class="sub-text"> ... </p>
            <p class="big-text">
                ...
            </p>
        </div>
    </a>
</div>                      

Main settings

Name Type Description
Animations Mixed The animations are a feature of animations component.
Component dependency

This feature require animations component (../css/animations.css)

Animations documentation here
Box title HTML You can add a title and subtitle to every advanced image box by insert this HTML code below the image box container, example:

<div class="img-box adv-img adv-img-full-content">
   ...
</div>
<div class="caption-bottom">
    <h2>Title of the box</h2>
    <p>Tempor incididunt sed</p>
</div>
Show on hover CSS class To show content on mouse hover add class anima to content / caption object of target object, target object must have animation attributes. Add attribute data-anima-out="hide" to target object. Go to animation page for more details. Example: <div class="caption anima"> ... </div>.
Half content - top CSS class To show content on right position add class caption-top to content object of target object. Example: <div class="caption caption-top"> ... </div>.
Side content - right CSS class To show content on right position add class caption-right to content object of target object. Example: <div class="caption caption-right"> ... </div>.

ADVANCED CIRCLE IMAGE BOX


Examples


Usage

<a data-anima="fade-in" data-trigger="hover" data-anima-out="hide" class="img-box lightbox adv-circle circle adv-circle-center" href="#">
    <i class="fa fa-globe anima"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    <div class="caption anima">
        <h2>CIRCLE IMAGE BOX</h2>
        <p>Sed do eiusmod tempor incididunt ut labore beatae vitae dicta</p>
    </div>
</a>
<a data-anima="fade-in" data-trigger="hover" data-anima-out="hide" class="img-box lightbox adv-circle circle adv-circle-center-2" href="#">
    <i class="fa fa-scissors anima"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    <div class="caption anima">
        <div class="inner">
            <h2>CIRCLE IMAGE BOX</h2>
            <p>Sed do eiusmod tempor incididunt ut labore</p>
            <p class="sub"><i class="fa fa-calendar-o"></i> Category | 25 dec 2015</p>
        </div>
    </div>
</a>
<a data-anima="fade-bottom" data-trigger="hover" data-anima-out="hide" class="img-box lightbox adv-circle circle adv-circle-half" href="../images/large/large_wide_2.jpg">
    <i class="fa fa-question anima"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    <div class="caption anima">
        <h2>CIRCLE IMAGE BOX</h2>
        <p>Sed do eiusmod tempor incididunt beatae vitae dicta</p>
    </div>
</a>
<a data-anima="fade-bottom" data-trigger="hover" data-anima-out="hide" class="img-box lightbox adv-circle circle adv-circle-bottom i-center" href="../images/large/large_wide_2.jpg">
    <i class="fa fa-question anima"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    <div class="caption anima">
        <h2>IMAGE BOX</h2>
        <p>Sed do eiusmoda</p>
    </div>
</a>
<a data-anima="show-scale" data-trigger="hover" data-anima-out="hide" class="img-box lightbox adv-circle circle adv-circle-bg" href="../images/large/large_wide_2.jpg">
    <i class="fa fa-briefcase anima"></i>
    <img src="http://www.framework-y.com/images/thumb.png" alt="" />
    <div class="caption anima">
        <h2>CIRCLE IMAGE BOX</h2>
        <p>Sed do eiusmod tempor incididunt ut labore</p>
    </div>
</a>

Main settings

Name Type Description
Animations Mixed The animations are a feature of animations component.
Component dependency

This feature require animations component (../css/animations.css)

Animations documentation here
Always visible CSS Class To set a always visible content add class show to target object and remove attribute data-anima-out="hide".
Example: <a class="img-box scale adv-circle circle adv-circle-bg-icon show" href="../images/large/large_wide_2.jpg"> ... </div>.