#mainwrapper {
-font: 10pt normal Arial, sans-serif;
-height: auto;
-margin: 80px auto 0 auto;
-text-align: center;
-width: 660px;
}
/* Image Box Style */
#mainwrapper .boxzz {
-border: 5px solid #fff;
cursor: pointer;
-height: 182px;
-float: left;
-margin: 5px;
position: relative;
overflow: hidden;
-width: 200px;
--webkit-box-shadow: 1px 1px 1px 1px #ccc;
--moz-box-shadow: 1px 1px 1px 1px #ccc;
-box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .boxzz 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 */
#mainwrapper .boxzz .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 **/
#mainwrapper .boxzz .simple-caption {
-height: 30px;
width: 100%;
display: block;
-bottom: -30px;
-line-height: 25pt;
text-align: center;
}
/** Caption 2: Full Width & Height **/
#mainwrapper .boxzz .full-caption {
width: 170px;
height: 170px;
top: -200px;
text-align: left;
padding: 15px;
}
/** Caption 3: Fade **/
#mainwrapper .boxzz .fade-caption, #mainwrapper .boxzz .scale-caption {
opacity: 0;
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
}
/** Caption 4: Slide **/
#mainwrapper .boxzz .slide-caption {
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
left: 200px;
}
/** Caption 5: Rotate **/
#mainwrapper #box-5.boxzz .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);
}
#mainwrapper .boxzz .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 **/
#mainwrapper .boxzz .scale-caption h3, #mainwrapper .boxzz .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;
}
#mainwrapper .boxzz .scale-caption h3 {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-o-transition-delay: 300ms;
-ms-transition-delay: 300ms;
transition-delay: 300ms;
}
#mainwrapper .boxzz .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 **/
#mainwrapper .boxzz:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
/** Full Caption :hover Behaviour **/
#mainwrapper .boxzz:hover .full-caption {
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
-webkit-transform: translateY(100%);
opacity: 1;
transform: translateY(100%);
}
/** Fade Caption :hover Behaviour **/
#mainwrapper .boxzz:hover .fade-caption, #mainwrapper .boxzz:hover .scale-caption {
opacity: 1;
}
/** Slide Caption :hover Behaviour **/
#mainwrapper .boxzz: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%);
}
#mainwrapper .boxzz: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 **/
#mainwrapper .boxzz: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 **/
#mainwrapper .boxzz:hover #image-6 {
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
#mainwrapper .boxzz:hover .scale-caption h3, #mainwrapper .boxzz:hover .scale-caption p {
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
-webkit-transform: translateX(200px);
transform: translateX(200px);
}