How to add shadow effect to products on collection page like DAWN theme preview..?

[CrazyGen_IN]

How to add shadow effect to products on collection page like DAWN theme preview..

https://themes.shopify.com/themes/dawn/styles/default/preview

My website: www.crazygen.in 

[Sangeetanahar]

hello @CrazyGen_IN 

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->base.css...>
add the code end of the file

li.grid__item.scroll-trigger.animate--slide-in {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}
li.grid__item.scroll-trigger.animate--slide-in:hover {

 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }

result

Buy me a Pizza

If this was helpful, hit the like button and accept the solution.
Thanks

[BSSCommerce-B2B]

@CrazyGen_IN ,
Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file theme.liquid

Step 3: Add this code before </body>

<style>
.card-wrapper:hover .card__inner {
       transition: transform 3s ease, box-shadow 3s ease;
       transform: rotate(1deg);
       box-shadow: -1rem -1rem 1rem -1rem #0000000d, 1rem 1rem 1rem -1rem #0000000d, 0 0 .5rem #fff0, 0 2rem 3.5rem -2rem #00000080;
}
</style>

[GTLOfficial]

Hello @CrazyGen_IN 
Go to the  customization of Dawn Theme.
---> Theme settings ---> animations--->  select - 3D lift -- and then save the file.

If this was helpful, hit the like button and accept the solution.
Thanks