Custom CSS - Disabling hover effect on color picker

[Ronla1]

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 🙂

[David_SHT]

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]

https://sassysusa.com/
Thanks!

[Ronla1]

@David_SHT 

[suyash1]

@Ronla1 - can you please share this page link?

[Ronla1]

https://sassysusa.com/
Thanks!

[Ronla1]

@suyash1 

[suyash1]

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

[Ronla1]

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?

[suyash1]

@Ronla1 - add my given css above and then check

[Ronla1]

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

[suyash1]

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

[Ronla1]

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

[suyash1]

@Ronla1 - add this too

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

[Ronla1]

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

[suyash1]

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

[oscprofessional]

Hello @Ronla1 

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

[Ronla1]

https://sassysusa.com/
Thank you 🙂

[Ronla1]

@oscprofessional 

[oscprofessional]

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]

Hi @oscprofessional 
First of all, thank you so much.

I tried it and look what happened:

[Ronla1 · Accepted solution]

I found the solution:

.product-card .product-card-swatches--title {
  opacity: 0 !important;
}
.product-card .product-card-swatches {
  overflow: show !important;
  transform: none !important;
}