One Hat Cyber Team

View File Name : posrotatorimg.css

.products .product figure{position:relative;display:block;float:left;overflow:hidden;margin-bottom:0;width:100%}
.products .product figure:hover .product-image+.product-image{ opacity: 1; -moz-transition: all 0.2s ease 0s;}
.products .product figure:hover .overlay{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}
.products .product figure>a{display:block;float:left;width:100%;z-index:1}
.products .product figure>a .product-image{width:100%;line-height:0}
.products .product figure>a .product-image img{width:100%}
.products .product figure>a .product-image+.product-image{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	-moz-transition: all 0.2s ease-in-out 0s;
      transition: all 0.2s ease-in-out;
}
.products .product figure>a .product-image+.product-image img{max-width:none}
.second-image { position: absolute; opacity: 0; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; }

/* animation1 */
.animation1.second-image { left: 0; max-width: 100%; opacity: 0; position: absolute; top: 0; }

.js-product-miniature:hover .animation1.second-image, ul.product_list > li .product-container:hover .animation1.second-image { opacity: 1; visibility: visible; }

/* end animation1 */
/* animation2 */
.animation2.second-image { position: absolute; padding: 0; text-align: center; top: 0; width: 100%; left: 100%; visibility: hidden; opacity: 0; filter: alpha(opacity=0); }

.js-product-miniature:hover .animation2.second-image, ul.product_list > li .product-container:hover .animation2.second-image { opacity: 1; left: 0; visibility: visible; }

/* end animation2 */
/* animation3 */
.animation3.second-image { position: absolute; padding: 0; text-align: center; top: 0; width: 100%; right: 100%; visibility: hidden; opacity: 0; filter: alpha(opacity=0); }

.js-product-miniature:hover .animation3.second-image, ul.product_list > li .product-container:hover .animation3.second-image { opacity: 1; right: 0; visibility: visible; }

/* end animation3 */
/* animation4*/
.animation4.second-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; display: inline-block; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); }

.js-product-miniature:hover .animation4.second-image, ul.product_list > li .product-container:hover .animation4.second-image { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; }

/* end animation4 */
/* animation5*/
.animation5.second-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; display: inline-block; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); }

.js-product-miniature:hover .animation5.second-image, ul.product_list > li .product-container:hover .animation5.second-image { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; }

/* end animation5 */
/* animation6 */
.animation6.second-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; display: inline-block; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; }

.js-product-miniature:hover .animation6.second-image, ul.product_list > li .product-container:hover .animation6.second-image { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); opacity: 1; visibility: visible; }

/* end animation6 */
/* animation7 */
.animation7.second-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; display: inline-block; -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%; }

.js-product-miniature:hover .animation7.second-image, ul.product_list > li .product-container:hover .animation7.second-image { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); opacity: 1; visibility: visible; }

/* end animation7 */
/* animation8 */
.animation8.second-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; display: inline-block; -webkit-transform: translateZ(-1000px) rotateY(-90deg); -moz-transform: translateZ(-1000px) rotateY(-90deg); -ms-transform: translateZ(-1000px) rotateY(-90deg); -o-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); }

.js-product-miniature:hover .animation8.second-image, ul.product_list > li .product-container:hover .animation8.second-image { -webkit-transform: translateZ(0) rotateY(0); -moz-transform: translateZ(0) rotateY(0); -ms-transform: translateZ(0) rotateY(0); -o-transform: translateZ(0) rotateY(0); transform: translateZ(0) rotateY(0); opacity: 1; visibility: visible; }

/* end animation8 */
/* animation9*/
.animation9.second-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; display: inline-block; -moz-transform: scale3d(1, 1, 1); -webkit-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

.js-product-miniature:hover .animation9.second-image, ul.product_list > li .product-container:hover .animation9.second-image { opacity: 1; visibility: visible; -moz-transform: scale3d(1.1, 1.1, 1.1); -webkit-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }

/* end animation9 */
/* animation10*/
.animation10.second-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; display: inline-block; -webkit-transform: translateX(100%) rotate(180deg); -moz-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); -o-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg); }

.js-product-miniature:hover .animation10.second-image, ul.product_list > li .product-container:hover .animation10.second-image { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); opacity: 1; visibility: visible; }

/* end animation10 */
/* animation11*/
.animation11.second-image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; display: inline-block; -webkit-transform: translateX(-100%) rotate(-180deg); -moz-transform: translateX(-100%) rotate(-180deg); -ms-transform: translateX(-100%) rotate(-180deg); -o-transform: translateX(-100%) rotate(-180deg); transform: translateX(-100%) rotate(-180deg); }

.js-product-miniature:hover .animation11.second-image, ul.product_list > li .product-container:hover .animation11.second-image { -webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0); -ms-transform: translateX(0) rotate(0); -o-transform: translateX(0) rotate(0); transform: translateX(0) rotate(0); opacity: 1; visibility: visible; }

/* end animation11 */