/*** Transition ***/ .woocommerce ul.products li.product .product-thumb-content, .woocommerce ul.products li.product .product-thumb .image .primary-image, .woocommerce ul.products li.product .product-thumb .image .product-thumb-overlay, .woocommerce ul.products[class*="product-hover-"] li.product .product-wrapper:before, .woocommerce ul.products[class*='product-hover-thumb'] li.product .product-thumb .image:before { -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .woocommerce ul.products.product-content-hover-slideleft li.product .product-thumb .product-thumb-content, .woocommerce ul.products.product-content-hover-slideleft li.product .product-thumb .product-thumb-content > div { -webkit-transition: all 0.5s linear 0s; -moz-transition: all 0.5s linear 0s; -ms-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } /*----*****---- << Product Listing - Overall Hover Effects >> ----*****----*/ .woocommerce ul.products[class*='product-hover-'] li.product .product-wrapper { position: relative; } .woocommerce ul.products[class*='product-hover-'] li.product .product-wrapper:before, .woocommerce ul.products[class*='product-hover-thumb'] li.product .product-thumb .image:before { content: ""; position: absolute; pointer-events: none; } .woocommerce ul.products[class*='product-hover-thumb'] li.product .product-wrapper:before { content: none; } /*** Fade Border & SkinBorder ***/ .woocommerce ul.products.product-hover-fade-border li.product .product-wrapper:before, .woocommerce ul.products.product-hover-fade-skinborder li.product .product-wrapper:before, .woocommerce ul.products.product-hover-thumb-fade-border li.product .product-thumb .image:before, .woocommerce ul.products.product-hover-thumb-fade-skinborder li.product .product-thumb .image:before { border: 2px solid rgba(0,0,0,0); bottom: 0; left: 0; margin: auto; right: 0; top: 0; z-index: 1; } .woocommerce ul.products.product-hover-thumb-fade-border li.product .product-thumb .image:before, .woocommerce ul.products.product-hover-thumb-fade-skinborder li.product .product-thumb .image:before { margin: 1px; z-index: 100; } .woocommerce ul.products.product-style-bordered.product-hover-fade-border li.product .product-wrapper:before, .woocommerce ul.products.product-style-bordered.product-hover-fade-skinborder li.product .product-wrapper:before, .woocommerce ul.products.product-style-bordered.product-hover-thumb-fade-border li.product .product-thumb .image:before, .woocommerce ul.products.product-style-bordered.product-hover-thumb-fade-skinborder li.product .product-thumb .image:before { bottom: -1px; left: -1px; right: -1px; top: -1px; } .woocommerce ul.products.product-style-bordered.product-hover-thumb-fade-border li.product .product-thumb .image:before, .woocommerce ul.products.product-style-bordered.product-hover-thumb-fade-skinborder li.product .product-thumb .image:before { margin: 2px; } .woocommerce ul.products.product-hover-fade-border.product-padding-default li.product .product-wrapper .product-details, .woocommerce ul.products.product-hover-fade-skinborder.product-padding-default li.product .product-wrapper .product-details { padding: 0 15px; } .woocommerce ul.products.product-hover-fade-border li.product:hover .product-wrapper:before, .woocommerce ul.products.product-hover-thumb-fade-border li.product:hover .product-thumb .image:before { border-color: rgba(0, 0, 0, 0.15); } /*** Fade Gradient Border ***/ .woocommerce ul.products.product-hover-fade-gradientborder li.product .product-wrapper:before, .woocommerce ul.products.product-hover-thumb-fade-gradientborder li.product .product-thumb .image:before { border-style: solid; border-width: 2px; border-image-slice: 1; margin: auto; opacity: 0; bottom: 0; left: 0; right: 0; top: 0; visibility: hidden; z-index: 100; -webkit-border-source: -webkit-linear-gradient(to right,#9105ea,#f73c95); -moz-border-source: -moz-linear-gradient(to right,#9105ea,#f73c95); -o-border-source: -o-linear-gradient(to right,#9105ea,#f73c95); border-image-source: linear-gradient(to right,#9105ea,#f73c95); } .woocommerce ul.products[class*='product-style-default'].product-hover-fade-gradientborder li.product .product-wrapper:before, .woocommerce ul.products[class*='product-style-default'].product-hover-thumb-fade-gradientborder li.product .product-thumb .image:before { z-index: 1; } .woocommerce ul.products.product-hover-thumb-fade-gradientborder li.product .product-thumb .image:before { margin: 1px; } .woocommerce ul.products.product-hover-fade-gradientborder.product-padding-default li.product .product-wrapper .product-details { padding: 0 15px; } .woocommerce ul.products.product-style-bordered.product-hover-fade-gradientborder li.product .product-wrapper:before, .woocommerce ul.products.product-style-bordered.product-hover-thumb-fade-gradientborder li.product .product-thumb .image:before { bottom: -1px; left: -1px; right: -1px; top: -1px; } .woocommerce ul.products.product-style-bordered.product-hover-thumb-fade-gradientborder li.product .product-thumb .image:before { margin: 2px; } .woocommerce ul.products.product-hover-fade-gradientborder li.product:hover .product-wrapper:before, .woocommerce ul.products.product-hover-thumb-fade-gradientborder li.product:hover .product-thumb .image:before { opacity: 1; visibility: visible; } /*** Fade Shadow ***/ .woocommerce ul.products.product-hover-fade-shadow li.product .product-wrapper:before, .woocommerce ul.products.product-hover-thumb-fade-shadow li.product .product-thumb .image:before { bottom: 0; left: 0; margin: auto; right: 0; top: 0; z-index: 100; } .woocommerce ul.products.product-hover-thumb-fade-shadow li.product .product-thumb .image:before { margin: 5px; } .woocommerce ul.products.product-hover-fade-shadow li.product:hover .product-wrapper:before { -webkit-box-shadow: 0 0 20px 5px rgba(0,0,0,.3); -moz-box-shadow: 0 0 20px 5px rgba(0,0,0,.3); box-shadow: 0 0 20px 5px rgba(0,0,0,.3); } .woocommerce ul.products.product-hover-thumb-fade-shadow li.product:hover .product-thumb .image:before { -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0,.3); -moz-box-shadow: 0 0 6px 1px rgba(0,0,0,.3); box-shadow: 0 0 6px 1px rgba(0,0,0,.3); } .woocommerce ul.products.product-hover-fade-shadow.product-padding-default li.product .product-wrapper .product-details { padding: 0 15px; } .woocommerce ul.products.product-hover-fade-shadow.swiper-wrapper { margin-top: 25px; margin-bottom: 25px; } /*** Fade InShadow ***/ .woocommerce ul.products.product-hover-fade-inshadow li.product .product-wrapper:before, .woocommerce ul.products.product-hover-thumb-fade-inshadow li.product .product-thumb .image:before { bottom: 0; left: 0; margin: auto; right: 0; top: 0; z-index: 100; } .woocommerce ul.products.product-hover-fade-inshadow li.product:hover .product-wrapper:before, .woocommerce ul.products.product-hover-thumb-fade-inshadow li.product:hover .product-thumb .image:before { -webkit-box-shadow: 0 0 20px 2px rgba(0,0,0,0.1) inset; -moz-box-shadow: 0 0 20px 2px rgba(0,0,0,0.1) inset; box-shadow: 0 0 20px 2px rgba(0,0,0,0.1) inset; } .woocommerce ul.products[class*='product-style-default'].product-hover-fade-inshadow.product-overlay-dark-bgcolor li.product:hover .product-wrapper:before, .woocommerce ul.products[class*='product-style-default'].product-hover-thumb-fade-inshadow.product-overlay-dark-bgcolor li.product:hover .product-thumb .image:before { box-shadow: 0 0 20px 5px rgba(255,255,255,.3) inset; -moz-box-shadow: 0 0 20px 5px rgba(255,255,255,.3) inset; -webkit-box-shadow: 0 0 20px 5px rgba(255,255,255,.3) inset; } .woocommerce ul.products.product-hover-fade-inshadow.product-padding-default li.product .product-wrapper .product-details { padding: 0 15px; } /* .woocommerce ul.products[class*='product-style-default'].product-hover-fade-inshadow li.product .product-wrapper:before { z-index: 1; } */ /*----*****---- << Product Listing - Content Overlay Effects >> ----*****----*/ .woocommerce ul.products li.product .product-thumb-content, .woocommerce ul.products li.product .product-thumb .image .product-thumb-overlay { opacity: 0; } .woocommerce ul.products li.product:hover .product-thumb-content, .woocommerce ul.products li.product:hover .product-thumb .image .product-thumb-overlay { opacity: 1; } /*** Content Hover Effects ***/ .woocommerce ul.products.product-content-hover-slidetop li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-content-hover-slidebottom li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-content-hover-slideleft li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-content-hover-slideright li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-top.product-content-hover-slidedefault li.product .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-bottom.product-content-hover-slidedefault li.product .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-top-left.product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-top-right.product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-bottom-left.product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-bottom-right.product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div { -webkit-transition: -webkit-transform .5s ease, opacity .5s ease; transition: transform .5s ease, opacity .5s ease; } /** Top & Bottom**/ .woocommerce ul.products.product-content-hover-slidetop li.product .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-top.product-content-hover-slidedefault li.product .product-thumb-content > div { -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); transform: translate(0, -10px); } .woocommerce ul.products.product-style-egrp-over-pc.product-content-hover-slidetop li.product .product-details > div.product-element-group-wrapper, .woocommerce ul.products.product-style-igrp-over-pc.product-content-hover-slidetop li.product .product-details > div.product-buttons-wrapper.product-icons { -webkit-transform: translate(0, -100%); -moz-transform: translate(0, -100%); -o-transform: translate(0, -100%); transform: translate(0, -100%); } .woocommerce ul.products.product-content-hover-slidebottom li.product .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-bottom.product-content-hover-slidedefault li.product .product-thumb-content > div { -webkit-transform: translate(0, 10px); -moz-transform: translate(0, 10px); -o-transform: translate(0, 10px); transform: translate(0, 10px); } .woocommerce ul.products.product-style-egrp-over-pc.product-content-hover-slidebottom li.product .product-details > div.product-element-group-wrapper, .woocommerce ul.products.product-style-igrp-over-pc.product-content-hover-slidebottom li.product .product-details > div.product-buttons-wrapper.product-icons { -webkit-transform: translate(0, 50%); -moz-transform: translate(0, 50%); -o-transform: translate(0, 50%); transform: translate(0, 50%); } .woocommerce ul.products.product-style-egrp-over-pc.product-content-hover-slidebottom li.product:hover .product-details > div.product-element-group-wrapper { -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } /** Left **/ .woocommerce ul.products.product-content-hover-slideleft li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products[class*="thumb-alignment-top-left"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products[class*="thumb-alignment-bottom-left"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div { -webkit-transform: translate(-10%, 0); -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); transform: translate(-10%, 0); } .woocommerce ul.products.product-style-egrp-over-pc.product-content-hover-slideleft li.product .product-details > div.product-element-group-wrapper, .woocommerce ul.products.product-style-igrp-over-pc.product-content-hover-slideleft li.product .product-details > div.product-buttons-wrapper.product-icons { -webkit-transform: translate(-10%, -50%); -moz-transform: translate(-10%, -50%); -o-transform: translate(-10%, -50%); transform: translate(-10%, -50%); } /** Right **/ .woocommerce ul.products.product-content-hover-slideright li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products[class*="thumb-alignment-top-right"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div, .woocommerce ul.products[class*="thumb-alignment-bottom-right"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div { -webkit-transform: translate(10%, 0); -moz-transform: translate(10%, 0); -o-transform: translate(10%, 0); transform: translate(10%, 0); } .woocommerce ul.products.product-style-cornered.product-content-hover-slideright li.product .product-thumb .product-thumb-content > div:not(.product-icons), .woocommerce ul.products.product-style-cornered[class*="thumb-alignment-top-right"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div:not(.product-icons), .woocommerce ul.products.product-style-cornered[class*="thumb-alignment-bottom-right"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div:not(.product-icons) { -webkit-transform: translate(0); transform: translate(0); } .woocommerce ul.products.product-style-egrp-over-pc.product-content-hover-slideright li.product .product-details > div.product-element-group-wrapper, .woocommerce ul.products.product-style-igrp-over-pc.product-content-hover-slideright li.product .product-details > div.product-buttons-wrapper.product-icons { -webkit-transform: translate(10%, -50%); -moz-transform: translate(10%, -50%); -o-transform: translate(10%, -50%); transform: translate(10%, -50%); } /** Middle **/ .woocommerce ul.products.product-thumb-alignment-middle.product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div:nth-child(odd) { -ms-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); transition: opacity 0.3s ease-out, transform 0.3s ease-out; -ms-transition: opacity 0.3s ease-out, transform 0.3s ease-out; -webkit-transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .woocommerce ul.products.product-thumb-alignment-middle.product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div:nth-child(even) { -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0); transition: opacity 0.3s ease-out, transform 0.3s ease-out; -webkit-transition: opacity 0.3s ease-out, transform 0.3s ease-out; -ms-transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .woocommerce ul.products.product-thumb-alignment-middle.product-content-hover-slidedefault li.product:hover .product-thumb .product-thumb-content > div:nth-child(odd), .woocommerce ul.products.product-thumb-alignment-middle.product-content-hover-slidedefault li.product .product-thumb-content, .woocommerce ul.products.product-thumb-alignment-middle.product-content-hover-slidedefault li.product:hover .product-thumb .product-thumb-content > div:nth-child(even) { transform: none; -webkit-transform: none; -ms-transform: none; } .woocommerce ul.products.product-content-hover-slidebottom li.product:hover .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-content-hover-slidetop li.product:hover .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-content-hover-slideleft li.product:hover .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-content-hover-slideright li.product:hover .product-thumb .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-top.product-content-hover-slidedefault li.product:hover .product-thumb-content > div, .woocommerce ul.products.product-thumb-alignment-bottom.product-content-hover-slidedefault li.product:hover .product-thumb-content > div, .woocommerce ul.products[class*="thumb-alignment-top-left"].product-content-hover-slidedefault li.product:hover .product-thumb .product-thumb-content > div, .woocommerce ul.products[class*="thumb-alignment-top-right"].product-content-hover-slidedefault li.product:hover .product-thumb .product-thumb-content > div, .woocommerce ul.products[class*="thumb-alignment-bottom-left"].product-content-hover-slidedefault li.product:hover .product-thumb .product-thumb-content > div, .woocommerce ul.products[class*="thumb-alignment-bottom-right"].product-content-hover-slidedefault li.product:hover .product-thumb .product-thumb-content > div { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); } .woocommerce ul.products.product-style-igrp-over-pc[class*='product-content-hover-slide'] li.product:hover .product-details > div.product-element-group-wrapper, .woocommerce ul.products.product-style-igrp-over-pc[class*='product-content-hover-slide'] li.product:hover .product-details > div.product-buttons-wrapper.product-icons { transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); } .woocommerce ul.products.product-content-hover-slidebottom[class*="position-middle"] li.product .product-thumb .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products.product-content-hover-slidetop[class*="position-middle"] li.product .product-thumb .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products.product-content-hover-slideleft[class*="position-middle"] li.product .product-thumb .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products.product-content-hover-slideright[class*="position-middle"] li.product .product-thumb .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products.product-thumb-alignment-top.product-content-hover-slidedefault[class*="position-middle"] li.product .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products.product-thumb-alignment-bottom.product-content-hover-slidedefault[class*="position-middle"] li.product .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products[class*="thumb-alignment-top-left"][class*="position-middle"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products[class*="thumb-alignment-top-right"][class*="position-middle"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products[class*="thumb-alignment-bottom-left"][class*="position-middle"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons, .woocommerce ul.products[class*="thumb-alignment-bottom-right"][class*="position-middle"].product-content-hover-slidedefault li.product .product-thumb .product-thumb-content > div.product-buttons-wrapper.product-icons .wc_inline_buttons { -webkit-transform: translateY(-50%); transform: translateY(-50%); } /** Zoom **/ .woocommerce ul.products.product-content-hover-zoom li.product .product-thumb .product-thumb-content > div { transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -webkit-transition: transform .3s,opacity .3s; -moz-transition: transform .3s,opacity .3s; -o-transition: transform .3s,opacity .3s; } .woocommerce ul.products.product-content-hover-zoom li.product:hover .product-thumb .product-thumb-content > div { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /*** Overlay Effects ***/ .woocommerce ul.products[class*='product-overlay-'] li.product .product-thumb .image .product-thumb-overlay { display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } .woocommerce ul.products[class*='product-overlay-'] li.product:hover .product-thumb .image .product-thumb-overlay { opacity: 1; } .woocommerce ul.products.product-overlay-toptobottom li.product .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-bottomtotop li.product .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-lefttoright li.product .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-righttoleft li.product .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-middle li.product .product-thumb .image .product-thumb-overlay { display: block; height: 0; left: 0; margin: 0 auto; position: absolute; right: 0; top: 0; width: 100%; } .woocommerce ul.products.product-overlay-bottomtotop li.product .product-thumb .image .product-thumb-overlay { bottom: 0; top: auto; } .woocommerce ul.products.product-overlay-toptobottom li.product:hover .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-bottomtotop li.product:hover .product-thumb .image .product-thumb-overlay { height: 100%; } .woocommerce ul.products.product-overlay-lefttoright li.product .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-righttoleft li.product .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-middle li.product .product-thumb .image .product-thumb-overlay { height: 100%; top: 0; width: 0; } .woocommerce ul.products.product-overlay-lefttoright li.product .product-thumb .image .product-thumb-overlay { left: 0; right: auto; } .woocommerce ul.products.product-overlay-righttoleft li.product .product-thumb .image .product-thumb-overlay { left: auto; right: 0; } .woocommerce ul.products.product-overlay-middle li.product .product-thumb .image .product-thumb-overlay { left: 0; right: 0; } .woocommerce ul.products.product-overlay-lefttoright li.product:hover .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-righttoleft li.product:hover .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-middle li.product:hover .product-thumb .image .product-thumb-overlay { width: 100%; } .woocommerce ul.products.product-overlay-middleradial li.product .product-thumb .image .product-thumb-overlay { border-radius: 50%; bottom: 0; content: ''; display: block; height: 100%; left: 0; opacity: 0; position: absolute; right: 0; top: 0; -webkit-transform: scale(.1); -moz-transform: scale(.1); -ms-transform: scale(.1); transform: scale(.1); width: 100%; } .woocommerce ul.products.product-overlay-middleradial li.product:hover .product-thumb .image .product-thumb-overlay { opacity: 1; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .woocommerce ul.products.product-overlay-scale li.product .product-thumb .image .product-thumb-overlay, .woocommerce ul.products.product-overlay-flash li.product .product-thumb .image .product-thumb-overlay:after { content: ''; display: block; position: absolute; } .woocommerce ul.products.product-overlay-flash li.product .product-thumb .image .product-thumb-overlay:after { height: 100%; left: -100%; top: 0; width: 50%; z-index: 2; -webkit-transform: skewX(-25deg); transform: skewX(-25deg); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: -moz-linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: -webkit-linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: -ms-linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); } .woocommerce ul.products.product-overlay-flash li.product:hover .product-thumb .image .product-thumb-overlay:after { animation: shine 1s; -webkit-animation: shine 1s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } .woocommerce ul.products.product-overlay-scale li.product .product-thumb .image .product-thumb-overlay { height: 100%; opacity: 0; left: 0; top: 0; width: 100%; z-index: 2; -webkit-transform: scale(0.75); transform: scale(0.75); } .woocommerce ul.products.product-overlay-scale li.product:hover .product-thumb .image .product-thumb-overlay { -webkit-transform: scale(1); transform: scale(1); } .woocommerce ul.products[class*="product-overlay-gradient"] li.product .product-thumb .image .product-thumb-overlay:after { content: ""; display: block; height: 100%; position: absolute; top: 0; width: 100%; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; } .woocommerce ul.products[class*="product-overlay-gradient"] li.product .product-thumb .image .product-thumb-overlay:after { left: 0; margin: 0 auto; right: 0; } .woocommerce ul.products.product-overlay-gradienttoptobottom li.product .product-thumb .image .product-thumb-overlay:after { top: 0; background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.7))); background: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#b3000000', GradientType=0); } .woocommerce ul.products.product-overlay-gradientbottomtotop li.product .product-thumb .image .product-thumb-overlay:after { bottom: 0; top: auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.7))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#b3000000', GradientType=0); } .woocommerce ul.products.product-overlay-gradientrighttoleft li.product .product-thumb .image .product-thumb-overlay:after { right: 0; background: -webkit-gradient(linear, top left, top right, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.7))); background: -webkit-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -moz-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -ms-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -o-linear-gradient(right, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#b3000000', GradientType=0); } .woocommerce ul.products.product-overlay-gradientlefttoright li.product .product-thumb .image .product-thumb-overlay:after { left: 0; background: -webkit-gradient(linear, top right, top left, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.7))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#b3000000', GradientType=0); } .woocommerce ul.products.product-overlay-gradientradial li.product .product-thumb .image .product-thumb-overlay:after { background: rgba(0,0,0,.75); /* For older browsers that may not support gradients */ background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 10%, rgba(0,0,0,.75) 100%); background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 10%, rgba(0,0,0,.75) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 10%, rgba(0,0,0,.75) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 10%, rgba(0,0,0,.75) 100%); background: radial-gradient(rgba(0,0,0,0) 10%, rgba(0,0,0,.75) 100%); } .woocommerce ul.products[class*="product-overlay-gradient"] li.product:hover .product-thumb .image .product-thumb-overlay:after, .woocommerce ul.products.product-overlay-gradientradial li.product:hover .product-thumb .image .product-thumb-overlay:after { opacity: 1; } .woocommerce ul.products.product-overlay-horizontalelastic li.product .product-thumb .image .product-thumb-overlay { backface-visibility: hidden; background: rgba(0,0,0,.75); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .woocommerce ul.products.product-overlay-horizontalelastic li.product:hover .product-thumb .image .product-thumb-overlay { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(.52, 1.64, .37, .66); -ms-transition-timing-function: cubic-bezier(.52, 1.64, .37, .66); transition-timing-function: cubic-bezier(.52, 1.64, .37, .66); } .woocommerce ul.products.product-overlay-verticalelastic li.product .product-thumb .image .product-thumb-overlay { backface-visibility: hidden; background: rgba(0,0,0,.75); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .woocommerce ul.products.product-overlay-verticalelastic li.product:hover .product-thumb .image .product-thumb-overlay { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(.52, 1.64, .37, .66); -ms-transition-timing-function: cubic-bezier(.52, 1.64, .37, .66); transition-timing-function: cubic-bezier(.52, 1.64, .37, .66); } /*----*****---- << Product Listing - Image Hover Effects >> ----*****----*/ .woocommerce ul.products li:not(.product-with-secondary-image):hover .product-thumb .image .primary-image { transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; } .woocommerce ul.products.product-hover-image-blur li.product:not(.product-with-secondary-image):hover .product-thumb .image .primary-image { filter: blur(2px);-webkit-filter: blur(2px); } .woocommerce ul.products.product-hover-image-blackwhite li.product:not(.product-with-secondary-image):hover .product-thumb .image .primary-image { filter: grayscale(1); -webkit-filter: grayscale(1); } .woocommerce ul.products.product-hover-image-fadeinleft li.product:not(.product-with-secondary-image):hover .product-thumb .image .primary-image { background-position: left center; } .woocommerce ul.products.product-hover-image-fadeinright li.product:not(.product-with-secondary-image):hover .product-thumb .image .primary-image { background-position:right center; } .woocommerce ul.products.product-hover-image-rotate li.product:not(.product-with-secondary-image):hover .product-thumb .image .primary-image { -webkit-transform: scale(1.5) rotate(-10deg); -moz-transform: scale(1.5) rotate(-10deg); -ms-transform: scale(1.5) rotate(-10deg);transform: scale(1.5) rotate(-10deg); } .woocommerce ul.products.product-hover-image-rotatealt li.product:not(.product-with-secondary-image):hover .product-thumb .image .primary-image { -webkit-transform: scale(1.5) rotate(10deg); -moz-transform: scale(1.5) rotate(10deg); -ms-transform: scale(1.5) rotate(10deg); transform: scale(1.5) rotate(10deg); } .woocommerce ul.products.product-hover-image-scalein li.product:not(.product-with-secondary-image) .product-thumb .image .primary-image, .woocommerce ul.products.product-hover-image-scaleout li.product:not(.product-with-secondary-image):hover .product-thumb .image .primary-image { width: 100%; -webkit-transform: scale(1.2); transform: scale(1.2); } .woocommerce ul.products.product-hover-image-scalein li.product:not(.product-with-secondary-image):hover .product-thumb .image .primary-image, .woocommerce ul.products.product-hover-image-scaleout li.product:not(.product-with-secondary-image) .product-thumb .image .primary-image { width: 100%; -webkit-transform: scale(1); transform: scale(1); } .woocommerce ul.products.product-hover-image-floatout li.product .product-thumb, .woocommerce ul.products.product-hover-image-floatout li.product .product-details { -webkit-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .woocommerce ul.products.product-hover-image-floatout li.product:hover .product-thumb, .woocommerce ul.products.product-hover-image-floatout li.product:hover .product-details { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .woocommerce ul.products.product-hover-image-floatout.swiper-wrapper { margin-top: 10px; } /*----*****---- << Product Listing - Secondary Image Hover Effects >> ----*****----*/ .woocommerce ul[class*="product-hover-secimage"] li.product.product-with-secondary-image .product-thumb .image .primary-image, .woocommerce ul[class*="product-hover-secimage"] li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transition: all 0.35s ease; transition: all 0.35s ease; } /* Secondary Image Hover Effect - Fade ------------------------------------ */ .woocommerce ul.products.product-hover-secimage-fade li.product.product-with-secondary-image .product-thumb .image .secondary-image { opacity: 0; } .woocommerce ul.products.product-hover-secimage-fade li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { opacity: 1; } /* Secondary Image Hover Effect - ZoomIn -------------------------------------- */ .woocommerce ul.products.product-hover-secimage-zoomin li.product.product-with-secondary-image .product-thumb .image .secondary-image { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } .woocommerce ul.products.product-hover-secimage-zoomin li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /* Secondary Image Hover Effect - ZoomOut --------------------------------------- */ .woocommerce ul.products.product-hover-secimage-zoomout li.product.product-with-secondary-image:hover .product-thumb .image .primary-image, .woocommerce ul.products.product-hover-secimage-zoomout li.product.product-with-secondary-image .product-thumb .image .secondary-image { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } .woocommerce ul.products.product-hover-secimage-zoomout li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /* Secondary Image Hover Effect - ZoomOut* ---------------------------------------- */ .woocommerce ul[class*="product-hover-secimage-zoomout"] li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; } .woocommerce ul[class*="product-hover-secimage-zoomout"] li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* Secondary Image Hover Effect - ZoomOutUp* ------------------------------------------ */ .woocommerce ul.products.product-hover-secimage-zoomoutup li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-animation: hvr_zoomout_up 0.4025s linear; animation: hvr_zoomout_up 0.4025s linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes hvr_zoomout_up { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-100%); -moz-transform: scale(0.8) translateY(-100%); -ms-transform: scale(0.8) translateY(-100%); -o-transform: scale(0.8) translateY(-100%); transform: scale(0.8) translateY(-100%); opacity: 0.5; } } @keyframes hvr_zoomout_up { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-100%); -moz-transform: scale(0.8) translateY(-100%); -ms-transform: scale(0.8) translateY(-100%); -o-transform: scale(0.8) translateY(-100%); transform: scale(0.8) translateY(-100%); opacity: 0.5; } } /* Secondary Image Hover Effect - ZoomOutDown* -------------------------------------------- */ .woocommerce ul.products.product-hover-secimage-zoomoutdown li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-animation: hvr_zoomout_down 0.4025s linear; animation: hvr_zoomout_down 0.4025s linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes hvr_zoomout_down { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(100%); -moz-transform: scale(0.8) translateY(100%); -ms-transform: scale(0.8) translateY(100%); -o-transform: scale(0.8) translateY(100%); transform: scale(0.8) translateY(100%); opacity: 0.5; } } @keyframes hvr_zoomout_down { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(100%); -moz-transform: scale(0.8) translateY(100%); -ms-transform: scale(0.8) translateY(100%); -o-transform: scale(0.8) translateY(100%); transform: scale(0.8) translateY(100%); opacity: 0.5; } } /* Secondary Image Hover Effect - ZoomOutLeft* -------------------------------------------- */ .woocommerce ul.products.product-hover-secimage-zoomoutleft li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-animation: hvr_zoomout_left 0.4025s linear; animation: hvr_zoomout_left 0.4025s linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes hvr_zoomout_left { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-100%); -moz-transform: scale(0.8) translateX(-100%); -ms-transform: scale(0.8) translateX(-100%); -o-transform: scale(0.8) translateX(-100%); transform: scale(0.8) translateX(-100%); opacity: 0.5; } } @keyframes hvr_zoomout_left { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-100%); -moz-transform: scale(0.8) translateX(-100%); -ms-transform: scale(0.8) translateX(-100%); -o-transform: scale(0.8) translateX(-100%); transform: scale(0.8) translateX(-100%); opacity: 0.5; } } /* Secondary Image Hover Effect - ZoomOutRight* --------------------------------------------- */ .woocommerce ul.products.product-hover-secimage-zoomoutright li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-animation: hvr_zoomout_right 0.4025s linear; animation: hvr_zoomout_right 0.4025s linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes hvr_zoomout_right { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(100%); -moz-transform: scale(0.8) translateX(100%); -ms-transform: scale(0.8) translateX(100%); -o-transform: scale(0.8) translateX(100%); transform: scale(0.8) translateX(100%); opacity: 0.5; } } @keyframes hvr_zoomout_right { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(100%); -moz-transform: scale(0.8) translateX(100%); -ms-transform: scale(0.8) translateX(100%); -o-transform: scale(0.8) translateX(100%); transform: scale(0.8) translateX(100%); opacity: 0.5; } } /* Secondary Image Hover Effect - Push* ------------------------------------- */ .woocommerce ul[class*="product-hover-secimage-push"] li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* Secondary Image Hover Effect - PushUp -------------------------------------- */ .woocommerce ul.products.product-hover-secimage-pushup li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .woocommerce ul.products.product-hover-secimage-pushup li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* Secondary Image Hover Effect - PushDown ---------------------------------------- */ .woocommerce ul.products.product-hover-secimage-pushdown li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .woocommerce ul.products.product-hover-secimage-pushdown li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* Secondary Image Hover Effect - PushLeft ---------------------------------------- */ .woocommerce ul.products.product-hover-secimage-pushleft li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .woocommerce ul.products.product-hover-secimage-pushleft li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* Secondary Image Hover Effect - PushRight ----------------------------------------- */ .woocommerce ul.products.product-hover-secimage-pushright li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .woocommerce ul.products.product-hover-secimage-pushright li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* Secondary Image Hover Effect - Slide* -------------------------------------- */ .woocommerce ul[class*="product-hover-secimage-slide"] li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* Secondary Image Hover Effect - SlideUp --------------------------------------- */ .woocommerce ul.products.product-hover-secimage-slideup li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* Secondary Image Hover Effect - SlideDown ----------------------------------------- */ .woocommerce ul.products.product-hover-secimage-slidedown li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* Secondary Image Hover Effect - SlideLeft ----------------------------------------- */ .woocommerce ul.products.product-hover-secimage-slideleft li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* Secondary Image Hover Effect - SlideRight ------------------------------------------ */ .woocommerce ul.products.product-hover-secimage-slideright li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* Secondary Image Hover Effect - Hinge* -------------------------------------- */ .woocommerce ul[class*="product-hover-secimage-hinge"] li.product.product-with-secondary-image .product-thumb .image { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } .woocommerce ul[class*="product-hover-secimage-hinge"] li.product.product-with-secondary-image .product-thumb .image .secondary-image { opacity: 0; } .woocommerce ul[class*="product-hover-secimage-hinge"] li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { opacity: 0; } .woocommerce ul[class*="product-hover-secimage-hinge"] li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* Secondary Image Hover Effect - HingeUp --------------------------------------- */ .woocommerce ul.products.product-hover-secimage-hingeup li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .woocommerce ul.products.product-hover-secimage-hingeup li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .woocommerce ul.products.product-hover-secimage-hingeup li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } .woocommerce ul.products.product-hover-secimage-hingeup li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } /* Secondary Image Hover Effect - HingeDown ----------------------------------------- */ .woocommerce ul.products.product-hover-secimage-hingedown li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .woocommerce ul.products.product-hover-secimage-hingedown li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; -moz-transform-origin: 50% -50%; -ms-transform-origin: 50% -50%; -o-transform-origin: 50% -50%; transform-origin: 50% -50%; } .woocommerce ul.products.product-hover-secimage-hingedown li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } .woocommerce ul.products.product-hover-secimage-hingedown li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } /* Secondary Image Hover Effect - HingeLeft ----------------------------------------- */ .woocommerce ul.products.product-hover-secimage-hingeleft li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .woocommerce ul.products.product-hover-secimage-hingeleft li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .woocommerce ul.products.product-hover-secimage-hingeleft li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .woocommerce ul.products.product-hover-secimage-hingeleft li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } /* Secondary Image Hover Effect - HingeRight ------------------------------------------ */ .woocommerce ul.products.product-hover-secimage-hingeright li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .woocommerce ul.products.product-hover-secimage-hingeright li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .woocommerce ul.products.product-hover-secimage-hingeright li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } .woocommerce ul.products.product-hover-secimage-hingeright li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } /* Secondary Image Hover Effect - Fold ------------------------------------ */ .woocommerce ul[class*="product-hover-secimage-fold"] li.product.product-with-secondary-image .product-thumb .image { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } .woocommerce ul[class*="product-hover-secimage-fold"] li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .woocommerce ul[class*="product-hover-secimage-fold"] li.product.product-with-secondary-image .product-thumb .image .secondary-image { opacity: 0; } .woocommerce ul[class*="product-hover-secimage-fold"] li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } .woocommerce ul[class*="product-hover-secimage-fold"] li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -moz-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -ms-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -o-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); transform: rotateX(0) translate3d(0, 0%, 0) scale(1); opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* Secondary Image Hover Effect - FoldUp -------------------------------------- */ .woocommerce ul.products.product-hover-secimage-foldup li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .woocommerce ul.products.product-hover-secimage-foldup li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -moz-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -ms-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -o-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .woocommerce ul.products.product-hover-secimage-foldup li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%); -moz-transform: rotateX(90deg) scale(0.6) translateY(50%); -ms-transform: rotateX(90deg) scale(0.6) translateY(50%); -o-transform: rotateX(90deg) scale(0.6) translateY(50%); transform: rotateX(90deg) scale(0.6) translateY(50%); } /* Secondary Image Hover Effect - FoldDown ---------------------------------------- */ .woocommerce ul.products.product-hover-secimage-folddown li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .woocommerce ul.products.product-hover-secimage-folddown li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -moz-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -ms-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -o-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .woocommerce ul.products.product-hover-secimage-folddown li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -moz-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -ms-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -o-transform: rotateX(-90deg) scale(0.6) translateY(-50%); transform: rotateX(-90deg) scale(0.6) translateY(-50%); } /* Secondary Image Hover Effect - FoldLeft ---------------------------------------- */ .woocommerce ul.products.product-hover-secimage-foldleft li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .woocommerce ul.products.product-hover-secimage-foldleft li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -moz-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -ms-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -o-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .woocommerce ul.products.product-hover-secimage-foldleft li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%); -moz-transform: rotateY(-90deg) scale(0.6) translateX(50%); -ms-transform: rotateY(-90deg) scale(0.6) translateX(50%); -o-transform: rotateY(-90deg) scale(0.6) translateX(50%); transform: rotateY(-90deg) scale(0.6) translateX(50%); } /* Secondary Image Hover Effect - FoldRight ----------------------------------------- */ .woocommerce ul.products.product-hover-secimage-foldright li.product.product-with-secondary-image .product-thumb .image .primary-image { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .woocommerce ul.products.product-hover-secimage-foldright li.product.product-with-secondary-image:not(:hover) .product-thumb .image .secondary-image { -webkit-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -moz-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -ms-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -o-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .woocommerce ul.products.product-hover-secimage-foldright li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%); -moz-transform: rotateY(90deg) scale(0.6) translateX(-50%); -ms-transform: rotateY(90deg) scale(0.6) translateX(-50%); -o-transform: rotateY(90deg) scale(0.6) translateX(-50%); transform: rotateY(90deg) scale(0.6) translateX(-50%); } /* Secondary Image Hover Effect - FlipVertical -------------------------------------------- */ .woocommerce ul.products.product-hover-secimage-flipvert li.product.product-with-secondary-image .product-thumb .image .primary-image, .woocommerce ul.products.product-hover-secimage-flipvert li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; transition: all 0.35s ease; } .woocommerce ul.products.product-hover-secimage-flipvert li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); opacity: 0; } .woocommerce ul.products.product-hover-secimage-flipvert li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 0; } .woocommerce ul.products.product-hover-secimage-flipvert li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; -webkit-transition-delay: 0.14s; -moz-transition-delay: 0.14s; transition-delay: 0.14s; } /* Secondary Image Hover Effect - FlipHorizontal ----------------------------------------------- */ .woocommerce ul.products.product-hover-secimage-fliphoriz li.product.product-with-secondary-image .product-thumb .image .primary-image, .woocommerce ul.products.product-hover-secimage-fliphoriz li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; transition: all 0.35s ease; } .woocommerce ul.products.product-hover-secimage-fliphoriz li.product.product-with-secondary-image:hover .product-thumb .image .primary-image { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); opacity: 0; } .woocommerce ul.products.product-hover-secimage-fliphoriz li.product.product-with-secondary-image .product-thumb .image .secondary-image { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; opacity: 0; } .woocommerce ul.products.product-hover-secimage-fliphoriz li.product.product-with-secondary-image:hover .product-thumb .image .secondary-image { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; -webkit-transition-delay: 0.14s; -moz-transition-delay: 0.14s; transition-delay: 0.14s; } /*----*****---- << Product Listing - IconGroup Hover Effects >> ----*****----*/ .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons button, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons .button, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons a:before, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons a.button:before, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons button:before, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons button.button:before, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons .button:before, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons a:after, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons a.button:after, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons button:after, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons button.button:after, .woocommerce ul.products[class*="product-icongroup-hover"] li.product .product-buttons-wrapper.product-icons .button:after { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /** Bounce **/ .woocommerce ul.products.product-icongroup-hover-bounce li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce li.product .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce li.product .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce li.product .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce li.product .product-buttons-wrapper.product-icons .button { -webkit-transition-timing-function: cubic-bezier(.52,1.64,.37,.66); -moz-transition-timing-function: cubic-bezier(.52,1.64,.37,.66); -ms-transition-timing-function: cubic-bezier(.52,1.64,.37,.66); -o-transition-timing-function: cubic-bezier(.52,1.64,.37,.66); transition-timing-function: cubic-bezier(.52,1.64,.37,.66); } .woocommerce ul.products.product-icongroup-hover-bounce li.product:hover .product-buttons-wrapper.product-icons > .wc_inline_buttons > div:nth-child(1) > *, .woocommerce ul.products.product-icongroup-hover-bounce li.product:hover .product-buttons-wrapper.product-icons > .wc_inline_buttons > div[class*='_btn_wrapper']:nth-child(1) div[class*='yith-wcwl-'] > a { -webkit-transition-delay: 400ms; -moz-transition-delay: 400ms; -ms-transition-delay: 400ms; -o-transition-delay: 400ms; transition-delay: 400ms; } .woocommerce ul.products.product-icongroup-hover-bounce li.product:hover .product-buttons-wrapper.product-icons > .wc_inline_buttons > div:nth-child(2) > *, .woocommerce ul.products.product-icongroup-hover-bounce li.product:hover .product-buttons-wrapper.product-icons > .wc_inline_buttons > div[class*='_btn_wrapper']:nth-child(2) div[class*='yith-wcwl-'] > a { -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; -ms-transition-delay: 600ms; -o-transition-delay: 600ms; transition-delay: 600ms; } .woocommerce ul.products.product-icongroup-hover-bounce li.product:hover .product-buttons-wrapper.product-icons > .wc_inline_buttons > div:nth-child(3) > *, .woocommerce ul.products.product-icongroup-hover-bounce li.product:hover .product-buttons-wrapper.product-icons > .wc_inline_buttons > div[class*='_btn_wrapper']:nth-child(3) div[class*='yith-wcwl-'] > a { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } .woocommerce ul.products.product-icongroup-hover-bounce li.product:hover .product-buttons-wrapper.product-icons > .wc_inline_buttons > div:nth-child(4) > *, .woocommerce ul.products.product-icongroup-hover-bounce li.product:hover .product-buttons-wrapper.product-icons > .wc_inline_buttons > div[class*='_btn_wrapper']:nth-child(4) div[class*='yith-wcwl-'] > a { -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } /* Icon Group - Postion - Horizontal */ /* Horizontal Bottom */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product .product-buttons-wrapper.product-icons .button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons .button { bottom: -60px; top: auto; visibility: hidden; } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons .button { bottom: 10px; visibility: visible; } .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons .button { bottom: 0; visibility: visible; } /* Horizontal Bottom - Icon Group Simple Style */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-bottom'] li.product:hover .product-buttons-wrapper.product-icons .button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-bottom']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons .button { bottom: 0; top: auto; } /* Horizontal Top */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product-buttons-wrapper.product-icons .button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product-buttons-wrapper.product-icons .button { bottom: auto; top: -60px; visibility: hidden; } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons .button { top: 10px; visibility: visible; } .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons .button { top: 0; visibility: visible; } /* Horizontal Top - Icon Group Simple Style */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='horizontal-position-top'] li.product:hover .product-buttons-wrapper.product-icons .button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='thumb-alignment-top']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons .button { bottom: auto; top: 0; } /* Middle - Icon Group - Type */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product .product-buttons-wrapper.product-icons .button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product .product-buttons-wrapper.product-icons .button { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-horizontal[class*='horizontal-position-middle'] li.product:hover .product-buttons-wrapper.product-icons .button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce[class*='thumb-alignment-middle']:not([class*="product-thumb-iconsgroup-position"]) li.product:hover .product-buttons-wrapper.product-icons .button { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /* Vertical left */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product-buttons-wrapper.product-icons .button { right: auto; left: -60px; } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons .button { left: 10px; } /* Vertical left - Icon Group - Type - Simple */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-left'] li.product:hover .product-buttons-wrapper.product-icons .button { right: auto; left: 0px; } /* Vertical Right */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product-buttons-wrapper.product-icons .button { right: -60px; left: auto; } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons .button { right: 10px; } /* Vertical Right - Icon Group - Type - Simple */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-top-right'] li.product:hover .product-buttons-wrapper.product-icons .button { left: auto; right: 0px; } /* Vertical Middle Left */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product-buttons-wrapper.product-icons .button { right: auto; left: -60px; } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons .button { left: 10px; } /* Vertical Middle left - Icon Group - Type - Simple */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-left'] li.product:hover .product-buttons-wrapper.product-icons .button { right: auto; left: 0px; } /* Vertical Middle right */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product-buttons-wrapper.product-icons .button { left: auto; right: -60px; } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons .button { right: 10px; } /* Vertical Middle right - Icon Group - Type - Simple */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-middle-right'] li.product:hover .product-buttons-wrapper.product-icons .button { left: auto; right: 0px; } /* Vertical Bottom Left */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product-buttons-wrapper.product-icons .button { left: -60px; right: auto; } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons .button { left: 10px; } /* Vertical Bottom Left - Icon Group - Type - Simple */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-left'] li.product:hover .product-buttons-wrapper.product-icons .button { left: 0px; right: auto; } /* Vertical Bottom Right */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product-buttons-wrapper.product-icons .button { left: auto; right: -60px; } .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-position-vertical[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons .button { right: 10px; } /* Vertical Bottom Right - Icon Group - Type - Simple */ .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-bounce.product-thumb-iconsgroup-style-simple[class*='vertical-position-bottom-right'] li.product:hover .product-buttons-wrapper.product-icons .button { left: auto; right: 0px; } /** Flip X **/ .woocommerce ul.products.product-icongroup-hover-flipx li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-flipx li.product .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-flipx li.product .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-flipx li.product .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-flipx li.product .product-buttons-wrapper.product-icons .button { transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); -webkit-transform: scaleX(0); } .woocommerce ul.products.product-icongroup-hover-flipx li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-flipx li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-flipx li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-flipx li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-flipx li.product:hover .product-buttons-wrapper.product-icons .button { transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); } /** Flip Y **/ .woocommerce ul.products.product-icongroup-hover-flipy li.product .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-flipy li.product .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-flipy li.product .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-flipy li.product .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-flipy li.product .product-buttons-wrapper.product-icons .button { transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); } .woocommerce ul.products.product-icongroup-hover-flipy li.product:hover .product-buttons-wrapper.product-icons a, .woocommerce ul.products.product-icongroup-hover-flipy li.product:hover .product-buttons-wrapper.product-icons a.button, .woocommerce ul.products.product-icongroup-hover-flipy li.product:hover .product-buttons-wrapper.product-icons button, .woocommerce ul.products.product-icongroup-hover-flipy li.product:hover .product-buttons-wrapper.product-icons button.button, .woocommerce ul.products.product-icongroup-hover-flipy li.product:hover .product-buttons-wrapper.product-icons .button { transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); }