@ahmedafsa
Posted
Hello @nemoanderson, well done!
Small suggestions to enhance the code further:
-
You're using vh unit for the card height which isn't the best practice; as due to the page's height the card's height gets defined and this can distort its design we want. so consider using pixels (px) or rems (rem). Alternatively it might be better not to set a specific height and let the content determine the appropriate height.
-
The image overlay in the hover effect extends beyond the image's dimensions. You can fix this by using either of:
.image-container {
border-radius: 25px; /* Adjust based on the image border radius */
overflow: hidden;
}
OR
.image-overlay {
border-radius: 25px; /* Adjust based on the image border radius */
}
- Bonus note: Use
transition: all 0.3s
on the elements with the hover effect to apply a wonderful transition effect
I hope these suggestions are helpful. Best wishes to you!