How can I have the product borders darken when you hover over them

[PAUL8]

I want to have my borders darken when you hover over them like it does in this website here: 

https://www.towerhousewares.co.uk/cooking-appliances

I use dawn theme, my store is womber.fr and the password is PROPAGANDAAA

Thanks!

Regards,

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
li.grid__item.scroll-trigger.animate--slide-in:hover {
    border: solid 1px #000;
}
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
li.grid__item.scroll-trigger.animate--slide-in:hover {
    border: solid 1px #000;
}
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[PAUL8]

Thanks, friend, it's working. Can you edit the code to make it with a more round angle so it fits this little line?

[AnneLuo · Accepted solution]

Replace the code with that below.

<style>
li.grid__item.scroll-trigger.animate--slide-in:hover {
    border: solid 2px #000;
    border-radius: 10px;
}
</style>

 Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[PAUL8]

Thanks. Can you help me delete all these corners when you do not cover them in every product preview?

[AnneLuo]

<style>
.card--card.gradient, .card__inner.gradient {
    background: #fff !important;
}
</style>