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!
Topic summary
A user seeks to replicate a hover animation effect where product card images transform into a semi-circle shape (rounded top) when hovered over, similar to an example site.
Solution Provided:
Another user shared CSS code to be added to the theme.liquid file that:
- Applies border-radius to create the rounded top effect on hover
- Includes transition properties for smooth animation
- Sets background color adjustments
Current Issue:
The solution works at smaller screen sizes (2-column grid around 990px breakpoint), but breaks at larger viewports when the grid displays 4 products per row. The semi-circle effect gets cut off at this breakpoint.
Status: The discussion remains open with the original poster seeking a fix for the responsive layout issue at wider screen sizes.
Hi @lotushaus
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just above tag
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:
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
