NFT preview card | HTML and CSS

Community feedback

• 

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  Hey! 👋 Your solution looks great! I'd like to ask you for help. I was stuck at positioning the eye icon and looked at your codes for help. I got it solved by copying your codes but still did not quite understand totally. In the code snippet below, after positioning top: 50% and left: 50%, the icon was not quite in the center of the container. And with this line of code: translate(-50%, -50%), the eye icon moved right to the center. I got the idea but how did you know how many percent to put in the translate part? I understand that translate with positive value will move the icon down and right, negative value will move the item up and left. Just cant figure out where the -50% comes from. I am looking forward to your answer! Thanks a lot.
  nft-card__banner::after { width: 4.8rem; height: 4.8rem; top: 50%; left: 50%; transform: translate(-50%, -50%);

  0

  ---

  

  David Osorio•560

  @osoriodevPosted almost 3 years ago

  @Duyen-codes Hello. The explanation is simple, when you set percentages in translate, this percentage refers to the element itself, the first value refers to the width and the second to the height. This way it doesn't matter if the width or height changes, it will always move half to the left and half up, and stay in the center. It's like a little trick.

  Note: the top and left positions the element with respect to the upper left corner, that's why i use this trick.

  I hope this helps you.

  0

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 years ago

  @osoriodev Thanks so much for the explain! Now I understand that 50% refers to 50% width and height of the eye icon. Thanks a lot again. Have a great day and happy coding! I'm learning web dev totally on my own so I really appreciate your share!

  0