Custom CSS - Disabling hover effect on color picker

How can I disable the hover effect on the color picker under the product photos?
I want it to be displayed at all times.

Without hover:

With hover:

Any suggestions would be very helpful.
Thank you :slightly_smiling_face:

Hi @Ronla1 ,

This is David at SalesHunterThemes.

I read your problem and it seems that I need to analyze your website to provide the solution here.

Would you please share your website URL

if your website is password protected then also provide the password.

David | SalesHunterThemes team.

@Ronla1 - can you please share this page link?

Hello @Ronla1

Please provide your store URL.So I can review it and provide a solution.

https://sassysusa.com/
Thanks!

https://sassysusa.com/
Thanks!

https://sassysusa.com/
Thank you :slightly_smiling_face:

@David_SHT

@suyash1

@oscprofessional

@Ronla1 - add this css to the very end of your app.css file and check

.product-card .product-card-swatches--container {height: 50px !important;  margin-top: 10px;}
.product-card .product-card-swatches{margin-top: 10px;}

Hey @suyash1 thank you so much.
The thing is, now when I hover over it the swatches move up and the title disappears. How can disable the whole hover effect so everything stays in place?

@Ronla1 - add my given css above and then check

I did :slightly_smiling_face: @suyash1
And it does exactly what I said…when I hover over it, it moves the colors upwards and fades out the title.

@Ronla1 - can you please add again? I will check it

@suyash1 you can check out the first collection strip on the homepage -
https://sassysusa.com/

Hello @Ronla1

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->product.grid.css>Add this code at the bottom.

.product-card .product-card-swatches--title {
    transition: none !important;
    transform: none !important;
}

@Ronla1 - add this too

.product-card:hover .product-card-swatches {transform: translateY(100%) !important;    position: initial !important;}

Now something else is happening, the title disappears and comes back again in a different position.
You can see it live.

@Ronla1 - then please try the solution given by @oscprofessional and check