NFT Preview Card Component using CSS Flexbox

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  Hello @RowenTey, you did a good job here👍👏. ,but i have some notes for you:

  • When you use transition. Use it for the element itself not the element on :hover effect on it. ex:

    • The wrong way

       .element:hover{
       	transition: opacity 200ms linear;
       }
    

  • The right way

    	.element {
    		transition: opacity 200ms linear;
              }
    

  • One pseudo-element can do the hover effect fine weather ::after or ::before. ex:

  	.card .img-wrapper::after {
          content: url(./images/icon-view.svg);
          position: absolute;
          background-color: /* Cyan color here... */;
          width: 100%;
          height: 100%;
          opacity: 0;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: .3s ease;
  	}
  

  by using the styles above you can remove .card .img-wrapper::before styles safely.

  • you can see My solution for this challenge it may be useful for you.!

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day.

  Keep coding🚀

  Marked as helpful

  1

  ---

  

  Rowen•60

  @RowenTeyPosted over 2 years ago

  @MohamedAridah Thank you so much for your advice, I have learned another useful trick today! :)

  0

  

  Mo•840

  @MohamedAridahPosted over 2 years ago

  @RowenTey You are welcome👍🌹. I'm really glad this was useful for you.

  1