Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

PRODUCT CARD | JS + ANIMATATION + MOBILE FIRST

#animation

@JkDeweb

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My second project..., any comment about it is welcome, thanks!!

Community feedback

Lucas 👾 104,580

@correlucas

Posted

Hello Jack, congratulations for your solution!

I've just saw your solution's live site and this is the most creative solution for this challenge I've seem here. Its just amazing the effect you've used to scale the image filling all the component and how it flips when the hover gets inactive. Nailed it.

My advice for your is that you use something like transform: scale(1.3); to make the photo grows when it flips back in order to don't show the image borders and it will be even more cool.

But anyway your solution is just perfect, I love when people made some custom effects their solution!

Keep it up Jack, I want to see your next customized solution!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord