Archived topic
product hover effect
3 replies · Started by Gonzalo on March 25, 2021
Viewing posts 1–4 of 4
Hi there,
how I can add the hover effect niche library - in shop view - for woocommerce products?
It's css, but I don't know if you have it there, to use it :)
Regards
Hi there,
this is the CSS that is used on Niche:
/* Transform add to cart and pricing on hover */
@media (min-width: 769px) {
.woocommerce ul.products li.product a.button {
transform: translateY(0);
width: 100%;
opacity: 0;
transition: all 0.4s;
}
.woocommerce ul.products li.product:hover a.button,
.woocommerce ul.products li.product:hover .price {
transform: translateY(calc(-100% - 10px));
opacity: 1;
}
.woocommerce ul.products li.product .price {
opacity: 1;
transition: all 0.4s;
}
.woocommerce ul.products li.product:hover .price {
opacity: 0;
transform: translateY(calc(-100% - 10px));
}
}work perfectly, thank you David!
I add a effect for product image too :)
https://www.rockwines.cl/productos/
Best regards
Awesome - that looks great!
Glad to be of help.
This archived topic is closed to new replies.
