NFT Card Component - FLEXBOX

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • The transition is not applied perfectly, if you apply a CSS transition only on hover, the transition will only occur when the user hovers over the element, but when the user stops hovering, the transition will not be reversed, resulting in an abrupt change. This can be jarring and not desirable from a UX perspective.

  ---

  • To avoid this issue, you can add the transition rule transition: .8s ease-out; for the default state of the element .card-img .after along with opacity property to maintain the transition. This will ensure that when the user stops hovering, the transition will smoothly revert back to the original state. You can do this by setting the default state transition to the same property values but with a longer duration or a different easing function.

  ---

  • The modified css is here,

  .card-img:hover .after {
    opacity: 1;
  }
  .card-img .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transition: .8s ease;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 255, 248, .5);
  }
  

  ---

  • Now the issue has been rectified, component got cool transition also

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0

  ---

  

  Elouka972•80

  @Elouka972Posted over 1 year ago

  @0xAbdulKhalid Thank you for your help :)

  0