Archived topic

Hover effect on products

1 reply · Started by Mårten on November 10, 2020

Viewing posts 1–2 of 2

November 10, 2020 at 11:29 pm #1526291

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;
}

November 11, 2020 at 4:22 am #1526516

Hi there,

try changing the CSS to this:

.product-summary-wrapper {
    z-index: 1;
    align-self: center;
    justify-self: center;
    background-color: rgba(255,255,255, 0.8);
    opacity: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
    margin-bottom: unset !important;
}
.woocommerce ul.products li.product .inside-wc-product-image {
    display: block;
}

This archived topic is closed to new replies.

Start building better websites today.