I am looking for a way to create a hover effect over the products. I found a solution that David has made by getting a white background over pictures. But is it possible to make the background color cover the entire product image?
Is there also a solution to enlarge the product window when hovering?
I have tried this method:
try this method.
1. Add this function to place a DIV wrapper around the title and price:
add_action( ‘woocommerce_shop_loop_item_title’, function() {
echo ‘
‘;
}, 9);
add_action( ‘woocommerce_after_shop_loop_item’, function() {
echo ‘
‘;
}, 15);
2. Add this CSS to overlay our product-summary-wrapper on top of the image:
.woocommerce ul.products li.product {
display: grid !important;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.product-summary-wrapper {
grid-row: 1;
grid-column: 1;
}
.product-summary-wrapper {
z-index: 1;
align-self: center;
justify-self: center;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
}
.woocommerce ul.products li.product:hover .product-summary-wrapper {
opacity: 1;
}