/* Skins css */ /*################### flat ########################*/ .skin.flat { vertical-align: top; } .skin.flat .layer-media{} .skin.flat .layer-content { padding: 0px; } .skin.flat .layer-hover { display: none; } /*################### flip-x ########################*/ .skin.flip-x { background: rgb(255, 255, 255) none repeat scroll 0 0; overflow: hidden; padding: 0; -webkit-perspective: 600px; perspective: 600px; position: relative; vertical-align: top; width: 100%; } .skin.flip-x:hover .layer-media { background: rgb(255, 255, 255) none repeat scroll 0 0; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); z-index: 900; } .skin.flip-x .layer-media { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: rgb(255, 255, 255) none repeat scroll 0 0; float: none; height: inherit; left: 0; text-align: center; top: 0; -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; width: inherit; z-index: 900; } .skin.flip-x:hover .layer-content { background: rgb(255, 255, 255) none repeat scroll 0 0; -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); z-index: 1000; } .skin.flip-x .layer-content { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: rgb(255, 255, 255) none repeat scroll 0 0; float: none; height: inherit; left: 0; padding: 0; position: absolute; top: 0; -webkit-transform: rotateX(-179deg); transform: rotateX(-179deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; width: inherit; z-index: 800; } .skin.flip-x .layer-hover { display: none; } /*################### thumbgoleft ########################*/ .skin.thumbgoleft { overflow: hidden; position: relative; vertical-align: top; } .skin.thumbgoleft:hover .layer-media { opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.5) translateX(-100%); -ms-transform: scale(0.5) translateX(-100%); transform: scale(0.5) translateX(-100%); } .skin.thumbgoleft .layer-media { -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; width: 100%; } .skin.thumbgoleft:hover .layer-content{ opacity: 1; filter: alpha(opacity=100); } .skin.thumbgoleft .layer-content { left: 0; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; } .skin.thumbgoleft .layer-hover { display: none; } /*################### thumbrounded ########################*/ .skin.thumbrounded{} .skin.thumbrounded .layer-media { background: rgb(255, 255, 255) none repeat scroll 0 0; border-radius: 50%; overflow: hidden; } .skin.thumbrounded .layer-media .thumb { height:240px; } .skin.thumbrounded .layer-content{} .skin.thumbrounded .layer-hover { display: none; } /*################### contentbottom ########################*/ .skin.contentbottom { overflow: hidden; position: relative; vertical-align: top; } .skin.contentbottom:hover .layer-media { z-index:9; } .skin.contentbottom .layer-media { -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; left: 0; top: 0; width: 100%; } .skin.contentbottom:hover .layer-content{ } .skin.contentbottom .layer-content { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; bottom: 0; color: rgb(255, 255, 255); left: 0; position: absolute; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; width: 100%; } .skin.contentbottom .layer-hover { display: none; } /*################### spinright ########################*/ .skin.spinright { overflow: hidden; position: relative; vertical-align: top; } .skin.spinright:hover .layer-media { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); opacity: 0; filter: alpha(opacity=0); } .skin.spinright .layer-media { -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; left: 0; top: 0; width: 100%; } .skin.spinright:hover .layer-content{ opacity: 1; filter: alpha(opacity=100); } .skin.spinright .layer-content { left: 0; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0; width: 100%; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; } .skin.spinright .layer-hover { display: none; }