You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1301 lines
24 KiB
1301 lines
24 KiB
/*
|
|
Skins css
|
|
*/
|
|
|
|
/*################### flat ########################*/
|
|
.skin.flat {
|
|
vertical-align: top;
|
|
}
|
|
.skin.flat .layer-media{}
|
|
.skin.flat .layer-content {
|
|
padding: 5px 10px;
|
|
}
|
|
.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;
|
|
}
|
|
/*################### flip-y ########################*/
|
|
|
|
|
|
|
|
.skin.flip-y {
|
|
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-y:hover .layer-media {
|
|
background: rgb(255, 255, 255) none repeat scroll 0 0;
|
|
-webkit-transform: rotateY(180deg);
|
|
transform: rotateY(180deg);
|
|
z-index: 900;
|
|
}
|
|
|
|
|
|
.skin.flip-y .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-y: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-y .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;
|
|
position: absolute;
|
|
top: 0;
|
|
-webkit-transform: rotateY(-179deg);
|
|
transform: rotateY(-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-y .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/*################### zoomin ########################*/
|
|
|
|
|
|
.skin.zoomin {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.zoomin:hover .layer-media {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
|
|
.skin.zoomin .layer-media {
|
|
transition: all 1s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.zoomin:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.zoomin .layer-content {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.zoomin .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
/*################### zoomout ########################*/
|
|
.skin.zoomout {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
.skin.zoomout:hover .layer-media {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
.skin.zoomout .layer-media {
|
|
transition: all 1s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.zoomout:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.zoomout .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.zoomout .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*################### ThumbZoomContentIn ########################*/
|
|
|
|
|
|
.skin.thumbzoomcontentin {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbzoomcontentin:hover .layer-media {
|
|
transform: scale(1.5);
|
|
opacity: 1;
|
|
}
|
|
|
|
.skin.thumbzoomcontentin .layer-media {
|
|
transition: all 0.3s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.skin.thumbzoomcontentin:hover .layer-media {
|
|
filter: brightness(0.3);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.skin.thumbzoomcontentin:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.thumbzoomcontentin .layer-content {
|
|
margin-top: 30%;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 0.3s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbzoomcontentin .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*################### spinright ########################*/
|
|
|
|
|
|
.skin.spinright {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.spinright:hover .layer-media {
|
|
transform: rotate(30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
.skin.spinright .layer-media {
|
|
transition: all 1s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.spinright:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.spinright .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.spinright .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*################### spinrightzoom ########################*/
|
|
|
|
|
|
.skin.spinrightzoom {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.spinrightzoom:hover .layer-media {
|
|
opacity: 0.6;
|
|
transform: rotate(20deg) scale(1.5);
|
|
}
|
|
|
|
.skin.spinrightzoom .layer-media {
|
|
transition: all 1s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.spinrightzoom:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.spinrightzoom .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.spinrightzoom .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*################### spinleft ########################*/
|
|
|
|
.skin.spinleft {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.spinleft:hover .layer-media {
|
|
transform: rotate(-30deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
.skin.spinleft .layer-media {
|
|
transition: all 1s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.spinleft:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.spinleft .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.spinleft .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*################### spinleftzoom ########################*/
|
|
|
|
.skin.spinleftzoom {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.spinleftzoom:hover .layer-media {
|
|
opacity: 0.7;
|
|
transform: rotate(-30deg) scale(1.5);
|
|
}
|
|
|
|
.skin.spinleftzoom .layer-media {
|
|
transition: all 1s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.spinleftzoom:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.spinleftzoom .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.spinleftzoom .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*################### spinrightfast ########################*/
|
|
|
|
|
|
.skin.spinrightfast {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.spinrightfast:hover .layer-media {
|
|
transform: rotate(180deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
.skin.spinrightfast .layer-media {
|
|
transition: all 1s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.spinrightfast:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.spinrightfast .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.spinrightfast .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
/*################### spinleftfast ########################*/
|
|
|
|
.skin.spinleftfast {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.spinleftfast:hover .layer-media {
|
|
transform: rotate(-180deg);
|
|
opacity: 0;
|
|
}
|
|
|
|
.skin.spinleftfast .layer-media {
|
|
transition: all 1s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.spinleftfast:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.spinleftfast .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.spinleftfast .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
/*################### thumbgoleft ########################*/
|
|
|
|
.skin.thumbgoleft {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbgoleft:hover .layer-media {
|
|
opacity: 0;
|
|
transform: scale(0.5) translateX(-100%);
|
|
}
|
|
|
|
.skin.thumbgoleft .layer-media {
|
|
transition: all 1s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgoleft:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.thumbgoleft .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.thumbgoleft .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/*################### thumbgoright ########################*/
|
|
|
|
.skin.thumbgoright {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbgoright:hover .layer-media {
|
|
opacity: 0;
|
|
transform: scale(0.5) translateX(100%);
|
|
}
|
|
|
|
.skin.thumbgoright .layer-media {
|
|
transition: all 1s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgoright:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.thumbgoright .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.thumbgoright .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*################### thumbgotop ########################*/
|
|
|
|
.skin.thumbgotop {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
.skin.thumbgotop:hover .layer-media {
|
|
opacity: 0;
|
|
top: -100%;
|
|
transform: translateY(-100%) scale(0.6);
|
|
}
|
|
|
|
.skin.thumbgotop .layer-media {
|
|
transition: all 1s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgotop:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.thumbgotop .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.thumbgotop .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*################### thumbgobottom ########################*/
|
|
|
|
.skin.thumbgobottom {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
.skin.thumbgobottom:hover .layer-media {
|
|
bottom: -100%;
|
|
opacity: 0;
|
|
transform: scale(0.5) translateY(100%);
|
|
}
|
|
.skin.thumbgobottom .layer-media {
|
|
transition: all 1s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgobottom:hover .layer-content{
|
|
opacity: 1;
|
|
}
|
|
.skin.thumbgobottom .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1s ease 0s;
|
|
}
|
|
.skin.thumbgobottom .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*################### thumbmiddle ########################*/
|
|
.skin.thumbmiddle {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbmiddle:hover .layer-media {
|
|
transform: scale(0.9);
|
|
opacity: 0.3;
|
|
z-index:9;
|
|
}
|
|
|
|
.skin.thumbmiddle .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbmiddle:hover .layer-content{
|
|
opacity: 1;
|
|
z-index:10;
|
|
transform: scale(0.9);
|
|
padding:5px;
|
|
}
|
|
.skin.thumbmiddle .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 1s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbmiddle .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*################### thumbskew ########################*/
|
|
.skin.thumbskew {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbskew:hover .layer-media {
|
|
transform: scale(0.9) skew(5deg);
|
|
opacity: 0.3;
|
|
z-index:9;
|
|
}
|
|
|
|
.skin.thumbskew .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbskew:hover .layer-content{
|
|
opacity: 1;
|
|
z-index:10;
|
|
transform: scale(0.9) ;
|
|
padding:5px;
|
|
}
|
|
.skin.thumbskew .layer-content {
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 1s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbskew .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 {
|
|
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;
|
|
transition: all 1s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.contentbottom .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*################### contentmiddle ########################*/
|
|
.skin.contentmiddle {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.contentmiddle:hover .layer-media {
|
|
|
|
z-index:9;
|
|
}
|
|
|
|
.skin.contentmiddle .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.contentmiddle:hover .layer-content{
|
|
|
|
}
|
|
.skin.contentmiddle .layer-content {
|
|
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
|
|
bottom: 50%;
|
|
color: rgb(255, 255, 255);
|
|
left: 0;
|
|
position: absolute;
|
|
transform: translate(0px, 50%);
|
|
width: 100%;
|
|
}
|
|
.skin.contentmiddle .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/*################### contentinbottom ########################*/
|
|
.skin.contentinbottom {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.contentinbottom:hover .layer-media {
|
|
|
|
z-index:9;
|
|
}
|
|
|
|
.skin.contentinbottom .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.contentinbottom:hover .layer-content {
|
|
bottom: 0;
|
|
}
|
|
.skin.contentinbottom .layer-content {
|
|
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
|
|
bottom: -100%;
|
|
color: rgb(255, 255, 255);
|
|
left: 0;
|
|
position: absolute;
|
|
transition: all 0.5s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.contentinbottom .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*################### contentinleft ########################*/
|
|
.skin.contentinleft {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.contentinleft:hover .layer-media {
|
|
|
|
z-index:9;
|
|
}
|
|
|
|
.skin.contentinleft .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.contentinleft:hover .layer-content {
|
|
left: 0;
|
|
}
|
|
.skin.contentinleft .layer-content {
|
|
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
|
|
color: rgb(255, 255, 255);
|
|
height: 100%;
|
|
left: -100%;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 0.5s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.contentinleft .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/*################### contentinright ########################*/
|
|
.skin.contentinright {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.contentinright:hover .layer-media {
|
|
|
|
z-index:9;
|
|
}
|
|
|
|
.skin.contentinright .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.contentinright:hover .layer-content {
|
|
left: 0;
|
|
}
|
|
.skin.contentinright .layer-content {
|
|
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
|
|
color: rgb(255, 255, 255);
|
|
height: 100%;
|
|
left: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 0.5s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.contentinright .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*################### thumbgoleftconetntinright ########################*/
|
|
.skin.thumbgoleftconetntinright {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbgoleftconetntinright:hover .layer-media {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.skin.thumbgoleftconetntinright .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgoleftconetntinright:hover .layer-content {
|
|
left: 0;
|
|
}
|
|
.skin.thumbgoleftconetntinright .layer-content {
|
|
background: rgb(255, 255, 255) none repeat scroll 0 0;
|
|
height: 100%;
|
|
left: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 0.5s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgoleftconetntinright .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*################### thumbgobottomconetntinright ########################*/
|
|
.skin.thumbgobottomconetntinright {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbgobottomconetntinright:hover .layer-media {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.skin.thumbgobottomconetntinright .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgobottomconetntinright:hover .layer-content {
|
|
left: 0;
|
|
}
|
|
.skin.thumbgobottomconetntinright .layer-content {
|
|
background: rgb(255, 255, 255) none repeat scroll 0 0;
|
|
height: 100%;
|
|
left: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 0.5s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgobottomconetntinright .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/*################### thumbgotopconetntinright ########################*/
|
|
.skin.thumbgotopconetntinright {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbgotopconetntinright:hover .layer-media {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.skin.thumbgotopconetntinright .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgotopconetntinright:hover .layer-content {
|
|
left: 0;
|
|
}
|
|
.skin.thumbgotopconetntinright .layer-content {
|
|
background: rgb(255, 255, 255) none repeat scroll 0 0;
|
|
height: 100%;
|
|
left: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 0.5s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgotopconetntinright .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/*################### thumbgorightconetntinright ########################*/
|
|
.skin.thumbgorightconetntinright {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.thumbgorightconetntinright:hover .layer-media {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.skin.thumbgorightconetntinright .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgorightconetntinright:hover .layer-content {
|
|
left: 0;
|
|
}
|
|
.skin.thumbgorightconetntinright .layer-content {
|
|
background: rgba(255, 255, 255,0) none repeat scroll 0 0;
|
|
height: 100%;
|
|
left: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all 0.5s ease 0s;
|
|
width: 100%;
|
|
}
|
|
.skin.thumbgorightconetntinright .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/*################### halfthumbleft ########################*/
|
|
|
|
|
|
.skin.halfthumbleft {
|
|
overflow: hidden;
|
|
vertical-align: top;
|
|
}
|
|
.skin.halfthumbleft .layer-media {
|
|
display: inline-block;
|
|
float: left;
|
|
vertical-align: top;
|
|
width: 49%;
|
|
}
|
|
.skin.halfthumbleft .layer-content {
|
|
display: inline-block;
|
|
float: right;
|
|
width: 49%;
|
|
}
|
|
.skin.halfthumbleft .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/*################### halfthumbright ########################*/
|
|
|
|
.skin.halfthumbright {
|
|
overflow: hidden;
|
|
vertical-align: top;
|
|
}
|
|
.skin.halfthumbright .layer-media {
|
|
display: inline-block;
|
|
float: right;
|
|
vertical-align: top;
|
|
width: 49%;
|
|
}
|
|
.skin.halfthumbright .layer-content {
|
|
display: inline-block;
|
|
width: 49%;
|
|
}
|
|
.skin.halfthumbright .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/*################### thumbright ########################*/
|
|
|
|
|
|
.skin.thumbright{}
|
|
.skin.thumbright .layer-media{}
|
|
.skin.thumbright .layer-content{}
|
|
.skin.thumbright .layer-hover{}
|
|
|
|
/*################### 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;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*################### contentborder ########################*/
|
|
.skin.contentborder {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.contentborder:hover .layer-media {
|
|
|
|
z-index:9;
|
|
}
|
|
|
|
.skin.contentborder .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.contentborder:hover .layer-content{
|
|
|
|
}
|
|
.skin.contentborder .layer-content {
|
|
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
|
|
bottom: 50%;
|
|
color: rgb(255, 255, 255);
|
|
left: 0;
|
|
padding: 40px;
|
|
position: absolute;
|
|
transform: translate(0px, 50%);
|
|
}
|
|
.skin.contentborder .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.skin.contentborder .layer-content::before {
|
|
border-bottom: 1px solid #fff;
|
|
border-top: 1px solid #fff;
|
|
bottom: 30px;
|
|
left: 10px;
|
|
right: 10px;
|
|
top: 30px;
|
|
transform: scale(0, 1);
|
|
transform-origin: 0 0 0;
|
|
}
|
|
|
|
.skin.contentborder .layer-content::after {
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #fff;
|
|
bottom: 10px;
|
|
left: 30px;
|
|
right: 30px;
|
|
top: 10px;
|
|
transform: scale(1, 0);
|
|
transform-origin: 100% 0 0;
|
|
}
|
|
|
|
.skin.contentborder:hover .layer-content::before, .skin.contentborder:hover .layer-content::after {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.skin.contentborder .layer-content::before, .skin.contentborder .layer-content::after {
|
|
content: "";
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.skin.contentborder .layer-content::before, .skin.contentborder .layer-content::after {
|
|
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*################### contentborderrounded ########################*/
|
|
.skin.contentborderrounded {
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.skin.contentborderrounded:hover .layer-media {
|
|
|
|
z-index:9;
|
|
}
|
|
|
|
.skin.contentborderrounded .layer-media {
|
|
transition: all 0.4s ease 0s;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.skin.contentborderrounded:hover .layer-content{
|
|
|
|
}
|
|
.skin.contentborderrounded .layer-content {
|
|
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
|
|
bottom: 50%;
|
|
color: rgb(255, 255, 255);
|
|
left: 0;
|
|
padding: 40px;
|
|
position: absolute;
|
|
transform: translate(0px, 50%);
|
|
}
|
|
.skin.contentborderrounded .layer-hover {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.skin.contentborderrounded .layer-content::before {
|
|
border-bottom: 1px solid #fff;
|
|
border-top: 1px solid #fff;
|
|
border-radius: 15px;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
right: 30px;
|
|
top: 30px;
|
|
transform: scale(0, 1);
|
|
transform-origin: 0 0 0;
|
|
}
|
|
|
|
.skin.contentborderrounded .layer-content::after {
|
|
border-left: 1px solid #fff;
|
|
border-right: 1px solid #fff;
|
|
border-radius: 15px;
|
|
bottom: 30px;
|
|
left: 30px;
|
|
right: 30px;
|
|
top: 30px;
|
|
transform: scale(1, 0);
|
|
transform-origin: 100% 0 0;
|
|
}
|
|
|
|
.skin.contentborderrounded:hover .layer-content::before, .skin.contentborderrounded:hover .layer-content::after {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.skin.contentborderrounded .layer-content::before, .skin.contentborderrounded .layer-content::after {
|
|
content: "";
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.skin.contentborderrounded .layer-content::before, .skin.contentborderrounded .layer-content::after {
|
|
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
|
|
}
|
|
|
|
.skin.contentborderrounded .layer-content{
|
|
padding-bottom:65px;}
|
|
|
|
.skin.contentborderrounded .layer-content .read_more {
|
|
left: 0;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 100%;
|
|
z-index: 11;
|
|
}
|
|
|
|
|