CSS Flexbox, Responsive & Variable

Great Job ! It looks very nice ! If you want to fix the glitch on the card hover you can add these changes bellow to your code :

• .img-container { border-radius: 1rem; }

• .card-img { display: block; }

• .view-hover { height: 100%; }

Comment : /* .view-hover => height: 99% is not working it is making an issue here */

Hope it would help you !

@KareeMagdyy No worries ! I went through the same issue ahah

The main issue was the image container, it was a little bit bigger than the image.

By switching the images display to block, the image and its container have the same size.

And the border radius need to be applied to both the image and the container to make it look Nice !

I'm glad that it works for you too ;)