Customise product hover colour, opacity, timings etc

Hi there,

I was wondering if someone could help me with some style css for the product hover.
I have chosen ‘full info on hover’ and currently when you hover over the product quite an opaque black appears along with the product title.

I was wondering if anyone knew the style css for hover cover transition speed, colour, and opacity…

Sorry if I’ve not explained this very well!

Any help would be greatly appreciated.

Jack

Hello,

Thank you for your question.

So here are some code snippets that you can add to your Custom CSS section in Theme Settings to change some parameters

1. Background color with opacity

.basel-hover-info .product-element-top {
    background-color: #651919;
}
.basel-hover-info:hover>.product-element-top>a {
    opacity: 0.1;
}

2. Text color

.basel-hover-info .product-title a {
color: #ECC9C9;
}

3. Transition time

.basel-hover-info .product-element-top>a,
.basel-hover-info .quick-view,
.basel-buttons .yith-wcwl-add-to-wishlist,
.basel-hover-info .hover-mask {
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

Hope this will help you.

Hi, how can I select ‘full info on hover’? I can’t find this option in the settings.

Thanks,

Pat

Hi @Pat84,

You can find this option in Theme Settings -> Shop -> Product hover.

[Author]

Posts