.box {
            border: 5px solid #fff;
            cursor: pointer;
            height: 182px;
            float: left;
            margin: 5px;
            position: relative;
            overflow: hidden;
            width: 175px;
            -webkit-box-shadow: 1px 1px 1px 1px #ccc;
            -moz-box-shadow: 1px 1px 1px 1px #ccc;
            box-shadow: 1px 1px 1px 1px #ccc;
        }

            .box img {
                position: absolute;
                left: 0;
                -webkit-transition: all 300ms ease-out;
                -moz-transition: all 300ms ease-out;
                -o-transition: all 300ms ease-out;
                -ms-transition: all 300ms ease-out;
                transition: all 300ms ease-out;
            }

            /* Caption Common Style */
            .box .caption {
                background-color: rgba(0,0,0,0.8);
                position: absolute;
                color: #fff;
                z-index: 100;
                -webkit-transition: all 300ms ease-out;
                -moz-transition: all 300ms ease-out;
                -o-transition: all 300ms ease-out;
                -ms-transition: all 300ms ease-out;
                transition: all 300ms ease-out;
                left: 0;
            }


            /** Caption 1: Simple **/
            .box .simple-caption {
                height: 30px;
                width: 200px;
                display: block;
                bottom: -30px;
                line-height: 25pt;
                text-align: center;
            }

            /** Caption 2: Full Width & Height **/
            .box .full-caption {
                width: 170px;
                height: 170px;
                top: -200px;
                text-align: left;
                padding: 15px;
            }

            /** Caption 3: Fade **/
            .box .fade-caption, .box .scale-caption {
                opacity: 0;
                width: 165px;
                height: 175px;
                text-align: left;
                padding: 15px;
            }

            /** Caption 4: Slide **/
            .box .slide-caption {
                width: 170px;
                height: 170px;
                text-align: left;
                padding: 15px;
                left: 200px;
            }

        /** Caption 5: Rotate **/
        #box-5.box .rotate-caption {
            width: 170px;
            height: 170px;
            text-align: left;
            padding: 15px;
            top: 200px;
            -moz-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }

        .box .rotate {
            width: 200px;
            height: 400px;
            -webkit-transition: all 300ms ease-out;
            -moz-transition: all 300ms ease-out;
            -o-transition: all 300ms ease-out;
            -ms-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
        }

        /** Caption 6: Scale **/
        .box .scale-caption h3, .box .scale-caption p {
            position: relative;
            left: -200px;
            width: 170px;
            -webkit-transition: all 300ms ease-out;
            -moz-transition: all 300ms ease-out;
            -o-transition: all 300ms ease-out;
            -ms-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
        }

        .box .scale-caption h3 {
            -webkit-transition-delay: 300ms;
            -moz-transition-delay: 300ms;
            -o-transition-delay: 300ms;
            -ms-transition-delay: 300ms;
            transition-delay: 300ms;
        }

        .box .scale-caption p {
            -webkit-transition-delay: 500ms;
            -moz-transition-delay: 500ms;
            -o-transition-delay: 500ms;
            -ms-transition-delay: 500ms;
            transition-delay: 500ms;
        }

        /** Simple Caption :hover Behaviour **/
        .box:hover .simple-caption {
            -moz-transform: translateY(-100%);
            -o-transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
            opacity: 1;
            transform: translateY(-100%);
        }

        /** Full Caption :hover Behaviour **/
        .box:hover .full-caption {
            -moz-transform: translateY(100%);
            -o-transform: translateY(100%);
            -webkit-transform: translateY(100%);
            opacity: 1;
            transform: translateY(100%);
        }

        /** Fade Caption :hover Behaviour **/
        .box:hover .fade-caption, .box:hover .scale-caption {
            opacity: 1;
        }

        /** Slide Caption :hover Behaviour **/
        .box:hover .slide-caption {
            background-color: rgba(0,0,0,1) !important;
            -moz-transform: translateX(-100%);
            -o-transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
            opacity: 1;
            transform: translateX(-100%);
        }

        .box:hover img#image-4 {
            -moz-transform: translateX(-100%);
            -o-transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            opacity: 1;
        }

        /** Rotate Caption :hover Behaviour **/
        .box:hover .rotate {
            background-color: rgba(0,0,0,1) !important;
            -moz-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }

        /** Scale Caption :hover Behaviour **/
        .box:hover #image-6 {
            -moz-transform: scale(1.4);
            -o-transform: scale(1.4);
            -webkit-transform: scale(1.4);
            transform: scale(1.4);
        }

        .box:hover .scale-caption h3, .box:hover .scale-caption p {
            -moz-transform: translateX(200px);
            -o-transform: translateX(200px);
            -webkit-transform: translateX(200px);
            transform: translateX(200px);
        }