#owlCarousel, .owl-stage-outer, .owl-stage, .owl-item-bg, .owl-item { height: 100%; min-height: 200px; } #owlCarousel{ width: 100%; overflow: hidden; position: relative; } #owlCarousel:hover .owl-nav{ opacity: 1; } /* slider container */ .owl-item { display: inline-block; width: 100%; overflow: hidden; -webkit-backface-visibility: hidden; /* -webkit-transform: translateZ(0) scale(1.0, 1.0); */ } .owl-item .owl-item-bg { width: 100%; display: inline-block; position: absolute; background-size: 100% 100%; background-position: center center; } /* previus/next slider control container */ .owl-nav { position: absolute; top: 50%; transform: translateY(-80px); left: 0; right: 0; opacity: 0; transition: all .3s; } /* slider previous/next fontawsome icon */ .owl-prev-icon:before, .owl-next-icon:before { font-family: FontAwesome; color: rgba(255,255,255,.7); font-size: 30px; transition: all 1s ease } /* left arrow */ .owl-prev-icon:before { content: '\f104'; } /* right arrow */ .owl-next-icon:before { content: '\f105'; } .owl-prev-icon {left: 0;} .owl-next-icon {right: 0} /*----------- nav hover ------------*/ /* prevent animation when disabling loop mode .owl-next:not(.disabled):hover */ .owl-prev:hover, .owl-next:hover { animation: navShadow 4s ease-in-out infinite; } .owl-prev:hover .owl-prev-icon, .owl-next:hover .owl-next-icon { width: 25%; } @keyframes navShadow { 0%, 100% {box-shadow: 0px 0px 1px 0 #f1f1f1;} 50% {box-shadow: 0px 0px 5px 0 #f1f1f1} } .owl-prev.disabled:hover , .owl-next.disabled:hover { animation: none; } .owl-prev.disabled:hover .owl-prev-icon, .owl-next.disabled:hover .owl-next-icon { width: 50%; } /*----------------------------------- Owl content styling -----------------------------------*/ .slide-content { position: absolute; right: 20%; top: 35%; width: 45%; height: 150px; padding: 10px; text-align: center; /* transform: translate(-50%,-50%) rotate3d(1, 0, 0, -90deg); */ transform-origin: top; background-color: rgba(0,0,0,.4); /* -webkit-clip-path: polygon(0 0 , 100% 0 , 90% 100% , 10% 100% ); */ color: #fff; /* font-size: 2em; */ } .slide-content, .slide-content h3, .slide-content h2, .slide-content p, .slide-content h3:before, .slide-content h3:after { transition: all 2s ease; } .slide-content h3 { position: relative; display: inline-block; text-transform: uppercase; color: rgba(255,255,255,.95); /* transform: translate3d(-100%, 0,1px); */ } .slide-content h3:before, .slide-content h3:after { content: ''; display: block; width: 70px; height: 2px; position: absolute; top: 49%; background-color: #f1f1f1; } .slide-content h3:before { left: -90px; /* transform: translate3d(-700%, 0, 1px) */ } .slide-content h3:after { right: -90px; /* transform: translate3d(700%, 0, 1px) */ } .slide-content h2 { color: #f9f9f9; /* font-size: 1.3em; */ margin-top: 10px; margin-bottom: 15px; text-transform: uppercase; /* transform: translate3d(100%, 0,1px); */ } .slide-content p { /* font-size: .6em; */ /* padding: 0 190px; */ line-height: 1.3em; letter-spacing: 1px; text-transform: capitalize; color: rgba(255,255,255,.8); /* transform: translate3d(0, 400%,1px); */ } /* animate content */ .owl-item.active .slide-content { transform: translate(-20%, 0%) rotate3d(1, 0, 0, 0); transition-delay: .7s } .owl-item.active h3, .owl-item.active h2, .owl-item.active p, .owl-item.active h3:before, .owl-item.active h3:after { transform: translate3d(0, 0,1px); transition-delay: 1s }