My 4th Challenge - NFT Preview Card with FlexBox

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.🥰

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.

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...