Shadow on the products as you hover over it.

Hello,

I would like to put shade on the edges of the products as soon as they hover over the product.

Is there any code that I can do that?

Hello,

Your site is under maintenance.

Do you mean shadow on the product grid in the shop/category page?

Add this code to the Theme Settings > Custom CSS > Global

.product-grid-item :hover{
-webkit-box-shadow: 1px 1px 39px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 39px 2px rgba(0,0,0,0.75);
box-shadow: 1px 1px 39px 2px rgba(0,0,0,0.75);
}

You can create the shadow code as per your needs here and replace https://www.cssmatic.com/box-shadow

Best Regards

Hello,

It worked, but it’s creating a shadow inside the other and it’s strange.
https://uploaddeimagens.com.br/imagens/sem_titulo1-png-62139024-867f-4a61-a933-237627716cf3

Would you like to create a shadow for the entire product, along with the description and price? Same as this.
https://uploaddeimagens.com.br/imagens/sem_titulo-png-bcbb89a8-8bb2-407d-90d7-9ae9c2c5a06e

Maintenance mode removed.

Hello,

Please replace the code with this one:

.product:hover{
-webkit-box-shadow: 1px 1px 39px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 39px 2px rgba(0,0,0,0.75);
box-shadow: 1px 1px 39px 2px rgba(0,0,0,0.75);
}

Best Regards

[Author]

Posts