Home Forums Basel support forum Customise product hover colour, opacity, timings etc Reply To: Customise product hover colour, opacity, timings etc

#2692

Artem Temos
Keymaster

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.