Why gap at bottom of image (see when hover)?

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have some recommendations regarding your doubts that I believe will be of great interest to you.

SUGGESTION 💡:

• "I could solve this with height: 301px but I want to know why. You can see it when hovering the card-image (gap at the bottom of the image)". We can solve the issue with bottom gap when hovering the image.

• Add the following css rules

.card-image {
  height: 100%;
  object-fit: cover;
}

• And the icon-view.svg is not been showed during hovering, its because the incorrect source path you provided

• So the image path you provided needs to be starts with ./ because putting ./ states that your index.html file is in the root directory. So we can quicky fix by adding the ./ infront the image src path.

• Example: src="./images/icon-view.svg">

• Note: ./ is important here, which states from the root of a folder

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hi MetalRick,

If you are using a box for an image try using code below to align your image properly in your image container. Otherwise if you leave it like inline element have to exactly fit your image to your box.

card-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Or you may use other methods with the same idea.