File manager - Edit - /home/verseaumee/geniouskin/wp-content/plugins/powerpack-lite-for-elementor/assets/css/widget-flipbox-rtl.css
Back
.pp-icon { display: inline-block; line-height: 1; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; } .pp-icon i, .pp-icon svg { width: 1em; height: 1em; position: relative; display: block; } .pp-flipbox-container { overflow: hidden; position: relative; height: 300px; width: 100%; } .pp-flipbox-icon-image, .pp-flipbox-icon-image-back { display: inline-block; margin: 0 auto 0px auto; line-height: 1; } .pp-flipbox-icon-image img, .pp-flipbox-icon-image-back img { width: 30%; } .pp-flipbox-icon-image i, .pp-flipbox-icon-image-back i { font-size: 40px; line-height: 40px; width: 40px; } .pp-flipbox-overlay { height: 100%; padding: 35px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .pp-flipbox-front, .pp-flipbox-back { text-align: center; position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; } .pp-flipbox-front { background: #1abc9c; color: #fff; z-index: 2; } .pp-flipbox-back { background: #444; color: #fff; } .pp-flipbox-back .pp-flipbox-box-link { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .pp-flipbox-content, .pp-flipbox-heading { color: #fff; } .pp-flipbox-heading.pp-flipbox-linked-title { color: #fff; display: block; font-size: 1.5em; font-weight: 700; } /*--- CSS3 Transitions ---*/ .pp-flipbox-container { -webkit-perspective: 1000px; perspective: 1000px; } .pp-flipbox-front, .pp-flipbox-back { -webkit-transition-duration: 500ms; transition-duration: 500ms; -webkit-transition-property: all; transition-property: all; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .pp-flipbox-flip-card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .pp-flipbox-back, .pp-flipbox-front { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } /*--- Flip ---*/ .pp-animate-flip.pp-direction-up.pp-flipbox-container:hover .pp-flipbox-flip-card, .pp-animate-flip.pp-direction-up .pp-flipbox-back { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .pp-animate-flip.pp-direction-down.pp-flipbox-container:hover .pp-flipbox-flip-card, .pp-animate-flip.pp-direction-down .pp-flipbox-back { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .pp-animate-flip.pp-direction-left.pp-flipbox-container:hover .pp-flipbox-flip-card, .pp-animate-flip.pp-direction-left .pp-flipbox-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .pp-animate-flip.pp-direction-right.pp-flipbox-container:hover .pp-flipbox-flip-card, .pp-animate-flip.pp-direction-right .pp-flipbox-back { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } /*--- Slide ---*/ .pp-animate-push.pp-flipbox-container, .pp-animate-slide.pp-flipbox-container { overflow: hidden; } .pp-animate-push .pp-flipbox-back, .pp-animate-slide .pp-flipbox-back { z-index: 3; } .pp-animate-push.pp-direction-up .pp-flipbox-back, .pp-animate-slide.pp-direction-up .pp-flipbox-back { top: 100%; } .pp-animate-push.pp-direction-up.pp-flipbox-container:hover .pp-flipbox-back, .pp-animate-slide.pp-direction-up.pp-flipbox-container:hover .pp-flipbox-back { top: 0; } .pp-animate-push.pp-direction-down .pp-flipbox-back, .pp-animate-slide.pp-direction-down .pp-flipbox-back { top: auto; bottom: 100%; } .pp-animate-push.pp-direction-down.pp-flipbox-container:hover .pp-flipbox-back, .pp-animate-slide.pp-direction-down.pp-flipbox-container:hover .pp-flipbox-back { top: auto; bottom: 0; } .pp-animate-push.pp-direction-left .pp-flipbox-back, .pp-animate-slide.pp-direction-left .pp-flipbox-back { right: 100%; } .pp-animate-push.pp-direction-left.pp-flipbox-container:hover .pp-flipbox-back, .pp-animate-slide.pp-direction-left.pp-flipbox-container:hover .pp-flipbox-back { right: 0; } .pp-animate-push.pp-direction-right .pp-flipbox-back, .pp-animate-slide.pp-direction-right .pp-flipbox-back { right: auto; left: 100%; } .pp-animate-push.pp-direction-right.pp-flipbox-container:hover .pp-flipbox-back, .pp-animate-slide.pp-direction-right.pp-flipbox-container:hover .pp-flipbox-back { right: auto; left: 0; } /*--- Push + Slide Above ---*/ .pp-animate-push.pp-direction-up.pp-flipbox-container:hover .pp-flipbox-front { top: -100%; } .pp-animate-push.pp-direction-down.pp-flipbox-container:hover .pp-flipbox-front { top: 100%; } .pp-animate-push.pp-direction-left.pp-flipbox-container:hover .pp-flipbox-front { right: -100%; } .pp-animate-push.pp-direction-right.pp-flipbox-container:hover .pp-flipbox-front { right: 100%; } /*--- Zoom In ---*/ .pp-animate-zoom-in .pp-flipbox-back { opacity: 0; -webkit-transform: scale(0.75); transform: scale(0.75); z-index: 3; } .pp-animate-zoom-in.pp-flipbox-container:hover .pp-flipbox-back { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /*--- Zoom Out ---*/ .pp-animate-zoom-out .pp-flipbox-front { opacity: 1; -webkit-transform: scale(1); transform: scale(1); z-index: 1; width: 100%; -webkit-transition: opacity 0.35s, width 0.1ms, -webkit-transform 0.5s; transition: opacity 0.35s, width 0.1ms, -webkit-transform 0.5s; transition: transform 0.5s, opacity 0.35s, width 0.1ms; transition: transform 0.5s, opacity 0.35s, width 0.1ms, -webkit-transform 0.5s; } .pp-animate-zoom-out.pp-flipbox-container:hover .pp-flipbox-front { opacity: 0; width: 0; -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transition: opacity 0.5s 0.1s, width 0.1ms 0.5s, -webkit-transform 0.8s; transition: opacity 0.5s 0.1s, width 0.1ms 0.5s, -webkit-transform 0.8s; transition: transform 0.8s, opacity 0.5s 0.1s, width 0.1ms 0.5s; transition: transform 0.8s, opacity 0.5s 0.1s, width 0.1ms 0.5s, -webkit-transform 0.8s; } .pp-animate-fade.pp-flipbox-container:hover .pp-flipbox-front { opacity: 0; visibility: hidden; }
| ver. 1.4 |
Github
|
.
| PHP 8.5.7 | Generation time: 0 |
proxy
|
phpinfo
|
Settings