Image boxes

Image box

Examples

Lorem ipsum dolor sit amet consectetur adipiscing

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 (../../HTWF/scripts/jquery.magnific-popup.min.js and ../../HTWF/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> items of menu <ul class="nav navbar-nav"> ... </ul>, replace fa-icon-name with the class icon you want. You can use 3 icons family sets: Font Awesome, Icon Mind Solid, Icons Mind Line. Click the buttons below for the complete icons lists.

Font Awesome icons list Icons Mind icons list

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 (../../HTWF/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.

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="im-thumb 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="im-thumb 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="im-thumb 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="im-thumb 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="im-thumb 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="im-thumb"></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 (../../HTWF/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/image-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 image box

Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunto pertinole artillio.

Advanced image box

Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunto pertinole artillio.

Advanced image box

Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt.

Advanced image box

Congue voluptates odit exercitation voluptate quaeratea dictumst quas imperdiet leo posuere vehicula.

Advanced image box

Subtititle text

Advanced image box

Congue voluptates odit exercitation voluptate quaeratea dictumst quas imperdiet leo posuere vehicula.

Advanced image box

Subtititle text

Advanced image box

Congue voluptates odit exercitation voluptate quaeratea dictumst quas imperdiet leo posuere vehicula.

Advanced image box

Subtititle text

Advanced image box

Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore.

Advanced image box

Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore.

Advanced image box

Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore.

Advanced image box

Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore.

Advanced image box

Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore.

Advanced image box

Tempor incididunt sed

Advanced image box

Tempor incididunt sed

Advanced image box

Tempor incididunt sed

Installation

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

Usage

<div class="img-box adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
    <i class="im-thumb 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 image box</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>Advanced image box</h3>
            <p>
              ...
            </p>
        </div>
    </div>
    <div class="caption-bottom">
        <h2>Advanced image box</h2>
        <p> ... </p>
    </div>
</div>

<div class="img-box adv-img adv-img-side-content i-top-right" data-anima="scale-up" data-trigger="hover">
    <i class="im-thumb anima"></i>
    <a class="img-box" href="#">
        <img class="anima" src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </a>
    <div class="caption">
        <h2>Advanced image box</h2>
        <p>
            ...
        </p>
    </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>Advanced image box</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>Advanced image box</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/image-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 (`../../HTWF/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 mage 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 2018</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/image-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/image-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/image-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 (`../../HTWF/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/image-2.jpg"> ... </div>`.

Main components

Components

Components

Titles

Headers

Footer

Containers

Sections

Page templates

Image box

Examples

Top Left (default)

Bottom Left

Top Right

Bottom Right

Center

Usage

Main settings

Plugin dependency

Plugin dependency

Animations

Examples

Usage

Main settings

Component dependency

Advanced image box

Examples

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Advanced image box

Installation

Usage

Main settings

Component dependency

Advanced circle mage box

Examples

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Circle image box

Usage

Main settings

Component dependency