My 4th Challenge - NFT Preview Card with FlexBox

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Your code is very well.😊 I learned some new things from your code.

  But there is something that can be better.

  Firstly, instead of using px, you can use rem. (rem is relative to :root font-size. Normally, 1rem == 16px.

  .description{
      display: flex;
      flex-direction: column;
   /* gap:16px; 
      padding-bottom: 24px; */
      gap: 1rem; /* 1 * 16 = 16px */
      padding-bottom: 1.5rem /* 1.5 * 16 = 24px */
  }
  

  You can imagine 1rem is letter's width or height. If you want padding as 1 letter you can use 1rem , for 2 letter , 2rem.

  Secondly, The image hover effect is quite fast. If that could be a little bit lower & cursor: pointer; then it would be more awesome.🥰

  Marked as helpful

  1

  ---

  

  P

  Lukas•150

  @wanlukPosted over 2 years ago

  @prantiknoor Yes, I know that using other units instead pixels can be better, and working with rem is on my list of next things to do, but I only started learning at the start of July, so I still feel more comfortable with pixels for now (even if it's not the best). Thank you for your feedback! I will look to improve :)

  0
• 

  Gautam Juyal•330

  @gautamjuyalPosted over 2 years ago

  Great solution! Keep it up. Also one way to achieve the same effect would be using pseudo elements. Using pseudo elements, you can enclose image as well has semi transparent background within the pseudo element. Example :

  img-container::after{ content:' '; display:flex; width:100%; height:100%; position:absolute; background-image:url("eye-image-url"); background-color:(cyan-color-with-50%transparency); background-postion:center; background-repeat:no-repeat; opacity:0; }

  img-container:hover::after{ opacity:1 }

  Sorry for any mistakes since the code was directly written on the comment box.

  Marked as helpful

  1

  ---

  

  P

  Lukas•150

  @wanlukPosted over 2 years ago

  @gautamjuyal I was thinking about pseudo elements, but I didn’t really know how use it properly. Thanks for the advice :)

  1

  

  Gautam Juyal•330

  @gautamjuyalPosted over 2 years ago

  @wanluk you're welcome. Glad to be of help.

  1
• 

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  Hi @wanluk

  The component looks beautiful, I did a similar approach to this challenge and I have seen other people use the same method, a hidden div while showing on hover, I've used opacity to hide the div instead of display none because you can't use transition on display: none;

  Either way, I think you did great, so keep up the good work...

  Marked as helpful

  1

  ---

  

  P

  Lukas•150

  @wanlukPosted over 2 years ago

  @fatlindshehu Thank you for your answer! :)

  1