$card-over-bg-zindex:2; $card-under-bg-zindex:1; /*Extending Cards Features*/ .row{margin-bottom:$globalMargin;} .card { -webkit-transform: translate3d(0,0,0); background-size: cover; border: $rounded-0 !important; max-height: 150000px; margin-bottom:$globalMargin; background-position: center center !important; } .cover-slider .card{margin-bottom:0px!important;} [data-card-height="cover"].card{margin-bottom:0px!important;} .card-style { overflow: hidden; margin: 0px 16px $globalMargin 16px; border-radius: $rounded-card-style; border: none; box-shadow: $globalShadow; .card-body { padding: 15px; } } .card-style .card-overlay{ border-radius: $rounded-card-style; } .card-body { z-index: $card-over-bg-zindex; } .card-header { z-index: $card-over-bg-zindex; } .card-footer { z-index: $card-over-bg-zindex; } .card-top { z-index: $card-over-bg-zindex; position: absolute; left: 0px; right: 0px; top: 0px; } .card-bottom { z-index: $card-over-bg-zindex; position: absolute; left: 0px; right: 0px; bottom: 0px; } .card-center { z-index: $card-over-bg-zindex; position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); } .card-overlay { left: 0px; right: 0px; top: 0px; bottom: 0px; position: absolute; z-index: $card-under-bg-zindex; } .card-image { display: block; width: 100%; min-height: 250px; overflow: hidden; position: absolute; width: 100%; img { transition: all 450ms ease; } } .card-overflow { overflow: visible !important; z-index: 20; } [data-card-height] { p { padding-bottom: 0px; } } /*Card Effects*/ .card-scale-image { transform: scale(1.05, 1.05) !important; } .card-rotate-image { transform: rotate(5deg) scale(1.2, 1.2) !important; } .card-grayscale-image { filter: grayscale(100%); } .card-blur-image { filter: blur(5px); } .card-hide-image { opacity: 0 !important; } .card-hide { div { transition: $globalTransitions; } * { transition: $globalTransitions; } } .polaroid-effect { background-color: $color-white; padding: 5px; border: solid 1px rgba(0,0,0,0.1); } .card-scale { * { transition: $globalTransitions; } } .card-rotate { * { transition: $globalTransitions; } } .card-grayscale { * { transition: $globalTransitions; } } .card-blur { * { transition: $globalTransitions; } } .card-overlay{background-position:center center; background-size: cover!important;} .card-overlay-infinite{ position: absolute; left: 0px; right: 0px; bottom: 0px; width: 2000px; height: 100%; z-index: 0; animation: infiniteBG 600s; animation-iteration-count: infinite; animation-timing-function: linear; background-image: url(images/mountain.jpg); background-size: cover; background-repeat: repeat; background-position: left bottom; transform: translateX(0px); } @keyframes infiniteBG { 0% {transform:translateX(0px);} 50% {transform:translateX(-1400px);} 100% {transform:translateX(0px);} }