MOTION THEME - "Collection Callout" remove shadow effect

[lion_no]

I'm currently upgrading our website, and I really like the looks of it as of right now - however, there's slight slight perceived visual issue with the "Collection Callout".
Please see image below:

Pref. solution would not have a shadow effect, so items could rather blend into each other and look stacked on top of each other!

All help is appreciated!

[Zworthkey · Accepted solution]

Hii, @lion_no 
Paste this code on top of the theme.scss file.

img.callout-image.lazyautosizes.lazyloaded {
    box-shadow: none !important;
}

Thank You.

[Zworthkey]

Hii, @lion_no 
Kindly share your store URL so,
I can solve your problem and give you a proper solution.
Thank You.

[lion_no]

Hey, @Zworthkey - Here's a preview link to the URL, showcasing the issue at the top:
https://ulqp0or1qzy8yyzo-50647859379.shopifypreview.com/

Appreciated the help! 🙂

[Zworthkey · Accepted solution]

Hii, @lion_no 
Paste this code on top of the theme.scss file.

img.callout-image.lazyautosizes.lazyloaded {
    box-shadow: none !important;
}

Thank You.

[lion_no]

@Zworthkey hi again!
Sorry for the late response, had to delay the work on the new page to priorities other tasks.

I can verify that the snippet you sent has removed the shadow effect, but I stumbled upon an additional thing that would be neat to combine with this.
Originally the product pictures on the collection are transparent, however in "Collection Callout" suddenly have a background and are no longer transparent png files.

Might be due to a conversion from .jpg to .png, what would be the easiest way to change this? Pref. globally for the entire store 🙂

Thanks a lot for the help so far though, so I appreciate your help - even if you aren't able to help with the next bit mentioned above ~

[Zworthkey]

@lion_no 
Go to the Customization;
and theme setting their will be the option to remove the Shadow from All images.

[lion_no]

@Zworthkey 
I might be going blind, because I can't find any reference to it under the theme customization,
Unless you refer to 

Which unfortunately wouldn't solve my issue, as I would have to pick a image background color (and what I'm looking for is to have a transparent option, aka no background color)

If there's a specific option for "Shadow from all images", I must be blind - as I can't find it hehe 🙂

[Zworthkey]

mention your Site URL and screenshot where the Shadow is occurring. So i can help you to get rid of this.

[lion_no]

@Zworthkey sorry! I might not have been clear enough - your snippit code worked to remove the shadow, but now I noticed that the pictures are also using a background effect based on:

Though the original product pictures are .png and transparent, so this is an additional question if you know how to tell the theme to use transparent .png pictures instead of .jpg (if possible)
Here's an example on shadows being gone, but image using a background instead of being transparent which creates a box appearance. 

Here's a preview link - so you can see it yourself: https://28x38yzbem51frl6-50647859379.shopifypreview.com

[Zworthkey]

Use transparent image.

[lion_no]

@Zworthkey as seen in the product list (in Shopify admin)

The product is using a transparent image, .png file.
However the MOTION theme seems to convert it to non-transparent, which would be neat to turn off for us - so I'm curious to how we could do this?

[Zworthkey · Accepted solution]

Hii, @lion_no 
Paste this code on top of the theme.css file.

.callout-image {
    background-color: transparent !important;
}

Thank You.

[lion_no]

That worked perfectly!

Thank you so much for all the help!! 😄

If possible - would love your view on this issue (read the description of the issue, as it includes how to reproduce it on your own)
https://community.shopify.com/c/shopify-design/motion-theme-collection-page-remove-slow-transition-o...