I put a subtle transitions on hover

Community feedback

• 

  Arne•1,110

  @DudeldupsPosted over 1 year ago

  Heya! This looks good! Two things I saw:

  • For the hover state of the image, you can use the ::after pseudo element with

  background: #color url(eye-image) center no-repeat;

  And then use opacity transition to show or hide it on hover. This way, the "eye" icon also transitions :)

  • You used way too many flex containers. For the div where the price and remaining days are shown, you can put all of that in a div, give it a gap and use margin-right: auto on the price. This way, it pushes the other elements all the way to the right :)

  Marked as helpful

  0

  ---

  

  ThanHtike（テンタイ）•110

  @CGM-ThanHtikePosted over 1 year ago

  Thank you for the feedback @Dudeldups. I just fixed with opacity and it looks way better. And for the margin-right: auto method, I was try that before but the problem is, I was struggling with aligning icons and text vertically (that's why I used flex also for it).

  0
• 

  Adepoju Oluwatobi•200

  @adepoju-oluwatobiPosted over 1 year ago

  I love the transition effects... cool!

  1

  ---

  

  ThanHtike（テンタイ）•110

  @CGM-ThanHtikePosted over 1 year ago

  Thank you bro @Hue-Ray

  1