how to animate product card to change shape when hovering over it (dawn theme)

lotushaus
New Member
4 0 0

Hi, I am trying to get the animation effect found here: https://gohar.world/collections/spring

 

This is my current site (pw: hihi) that I have on the newest Dawn theme 13.0.1

https://lotushaus.studio/collections/jewelry

 

Thanks!

 

Replies 2 (2)

LuffyOnePiece
Shopify Partner
370 62 62

Hi @lotushaus 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

ul#product-grid .grid__item:hover .card__media img {
    border-radius: 500px 500px 0 0;
    -webkit-border-radius: 500px 500px 0 0;
    -moz-border-radius: 500px 500px 0 0;
    -khtml-border-radius: 500px 500px 0 0;
}

ul#product-grid .card__inner.color-background-2.gradient.ratio {
    background-color: #fff !important;
}

ul#product-grid .card__media img {
    transition: opacity .3s ease-in-out, border-radius 1s cubic-bezier(.25,.46,.45,.94);
    -webkit-transition: opacity .3s ease-in-out, border-radius 1s cubic-bezier(.25,.46,.45,.94);
}

 

Result:

 

LuffyOnePiece_0-1711167531697.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
lotushaus
New Member
4 0 0

Thanks! This worked but only if my product grid has 2 columns (at around 990px breakpoint). When the screen gets larger past that point, my shop shows 4 products in a row. It's at this point when the semi-circle is cut off. Is there a fix for this?

lotushaus_0-1711225714145.png