Add to cart, wishlist hover effect – custom css

Hello, does anyone know how I can customize the hover effect for the icons (add to cart, wishlist, view products) with custom css?

I would like to achieve the following:

1. icons not in the center but on the right side.
2. make icons smaller (only 80% of the current size)
3. instead of a fade up effect I would like it to increase from 0% to 100% opacity as soon as you move the mouse over the product image. More like a Fade IN effect.
4. remove the white background of the icons so that only the icons themselves are visible
5. change the color to dark blue if you hover over the icon

Attached is a picture of how it currently looks.

I appreciate any help!

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL so I will check and give you a possible solution?

Best Regards

Sure, here are some examples:

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. change the code as per your requirements.

.product-grid-item .wd-action-btn.wd-style-icon {
    --wd-action-icon-size: 15px;
}
.product-grid-item.wd-product.wd-hover-icons .wd-buttons .wd-action-btn {
    left: 70px !important;
    position: relative;
}
.product-grid-item.wd-product.wd-hover-icons .wd-buttons {
    background: transparent;
    box-shadow: none;
}
.product-grid-item.wd-product.wd-hover-icons .wd-buttons .wd-action-btn>a {
    color: #b4b4f8;
}

Best Regards

Nice, almost exactly what I wanted.

However, on hover the icons still move from bottom to top instead of fading in. Can this be changed?

And the icons are now on the right position but since they are shifted as absolute number (70px from the left) there is a weird displacements when switching product grid from 3 to 4.

And on Product grid with 6 columns one icon even disappears.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

It’s a domain only for testing purpose you can change and delete whatever you want…

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS.

.product-grid-item.wd-product.wd-hover-icons .wd-buttons {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 7px;
max-width: calc(100% – 10px);
}

.product-grid-item.wd-product.wd-hover-icons .wd-buttons .wd-action-btn {
left: auto;
position: relative;
}

Best Regards

Hello Aizaz,

In Product Grid column 6 the icons now are positioned in the center instead of on the right, but it looks even better this way. Thank you!
Now the icons have the right color and are in the right position.

Now back to my last point:
The icons still go on hover from bottom to top (fade UP) instead of being fade IN. (from 0 to 1 opacity)

Can you please tell me this last piece of code?

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS.

.product-grid-item.wd-product.wd-hover-icons .wd-buttons .wd-action-btn {
    opacity: 0 !important;
    position: relative !important;
    transition: opacity 0.3s ease !important;
}
.product-grid-item.wd-product.wd-hover-icons:hover .wd-buttons .wd-action-btn {
    opacity: 1 !important;
}

Best Regards

Unfortunately, nothing changed with the code.
Maybe I have not explained it good enough. Attached is a video of how I would like to have it.

The icons blend in. From 0 to 100% opacity. Without coming from below.

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS.

.wd-product.wd-hover-icons .wrapp-buttons {
    position: absolute !important;
    inset-inline: 0 !important;
    bottom: 10px !important;
    text-align: center !important;
    transition: opacity 0.3s ease !important, visibility 0.3s ease !important, transform 0s !important; /* Disable transform animation */
    opacity: 0 !important;
    visibility: hidden !important; /* Initially hidden */
    transform: none !important; /* Remove any transform properties */
}

.wd-product.wd-hover-icons:hover .wrapp-buttons {
    opacity: 1 !important;
    visibility: visible !important; /* Fade in and make visible on hover */
    transform: none !important; /* Ensure no vertical movement */
}

Best Regards

It works perfectly!!! Thank you so much for your effort!

You can close the topic.

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts