.products .product_item { z-index: 1; } .products .product_item .image_flip_front { display: block; position: relative; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; } .product_item a.product_item_link { position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } .product_item .kad-product-flipper { position: relative; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .product_item .image_flip_back { display: block; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -ms-backface-visibility: hidden; position: absolute; top:0; left:0; width: 100%; z-index: 2; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } @media (min-width: 767px) { .not_ie .product_item:hover .kad-product-flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); } .ie .product_item .image_flip_back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)"; filter: alpha(opacity=00); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ie .product_item:hover .image_flip_back { ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } } // Hover .product_item a.product_item_link .kad-product-noflipper img { opacity: 1; transition: opacity .6s ease-out; -webkit-transition: opacity .6s ease-out; -moz-transition: opacity .6s ease-out; -o-transition: opacity .6s ease-out; -webkit-transform: translateZ(0) scale(1.0, 1.0); } .product_item:hover a.product_item_link .kad-product-noflipper img { opacity: 0.8; } .product_item a.product_item_link .kad-product-noflipper img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }