Hi guys,
I had someone look at it who knows what he is doing and he fixed it for me.
For anyone who has the same issue, the code working is:
/**
* Styles
*/
.pif-has-gallery {
position: relative;
}
.pif-has-gallery .onsale {
z-index: 999999;
}
.pif-has-gallery .wp-post-image {
opacity: 1;
}
.pif-has-gallery .wp-post-image--secondary {
position: absolute;
top: 0; left: 0;
opacity: 0;
}
/* backward compatibility - .woocommerce-LoopProduct-link will probably be removed in future releases */
body.woocommerce:not(.single-product) ul.products li.pif-has-gallery a.woocommerce-LoopProduct-link [class*="wp-post-image"] {
-webkit-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}
body.woocommerce:not(.single-product) ul.products li.pif-has-gallery a:hover .wp-post-image {
opacity: 0;
}
body.woocommerce:not(.single-product) ul.products li.pif-has-gallery a:hover .wp-post-image--secondary {
opacity: 1;
}
body.woocommerce:not(.single-product) ul.products li.pif-has-gallery a [class*="wp-post-image"] {
-webkit-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}
body.woocommerce:not(.single-product) ul.products li.pif-has-gallery a:hover .wp-post-image {
opacity: 0;
}
body.woocommerce:not(.single-product) ul.products li.pif-has-gallery a:hover .wp-post-image--secondary {
opacity: 1;
}
Just paste that over the style.css content in /woocommerce-product-image-flipper/assets/css/style.css