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

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  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!

  Marked as helpful

  0

  ---

  

  MetalRick•70

  @MetalRick84Posted over 1 year ago

  Thanks for the review and suggestions!

  • I got rid of the gap with display: block. The solution is from stack overflow.
  • I changed the path for the icon.

  0
• 

  Mert Evirgen•140

  @waldvoidPosted over 1 year ago

  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.

  0

  ---

  

  MetalRick•70

  @MetalRick84Posted over 1 year ago

  Thank you, I solved it with this post.

  0