Preview

Album 1

Album 2

Album 3

... Album list

Usage

<div class="album" data-album-anima="fade-bottom">
    <div class="album-list">
        <div class="album-box">
            <a href="#" class="img-box img-scale">
                <img src="image.jpg">
            </a>
            <div class="caption">
                <h3>Album 1</h3>
            </div>
        </div>
        <div class="album-box">
            <a href="#" class="img-box img-scale">
                <img src="image.jpg">
            </a>
            <div class="caption">
                <h3>Album 2</h3>
            </div>
        </div>
        <div class="album-box">
            <a href="#" class="img-box img-scale">
                <img src="image.jpg">
            </a>
            <div class="caption">
                <h3>Album 3</h3>
            </div>
        </div>
    </div>
    <div class="cnt-album-box">
        <p class="album-title"><span>...</span> <a>Album list</a></p>
        <div class="album-item">
            
        </div>
        <div class="album-item">
             
        </div>
        <div class="album-item">
             
        </div>
    </div>
</div>

Settings

Name Type Description
Album item content -- The album item content accept any content but usually it contain a list of items like a grid list or a masonry list.
Columns Attribute Add the attribute data-columns="123" to the component to set the columns number from 1 to 6. Add the attribute data-columns-md="123" to set the columns number on medium screens and the attribute data-columns-sm="123" to set the columns number on small screens.
Try it 2 columns 4 columns
Album animation -- Add the attribute data-album-anima="animation-name" to the component to add an animation while the album is showed. For the animations list and for more details visit the animations page.
Album item animation -- Add the attributes data-anima="animation-name" data-trigger="hover" to the album item to animate the album on mouse hover. To animate only the album image add one of the following classes to the img-box code of the item: img-scale,img-scale-rotate,img-pulse,img-pulse-horizontal. For the animations list and for more details visit the animations page.
Grid list
Masonry list
Image box