NTF-card-component

Hi @Ridwan10000,

Congratulations on successfully completing the challenge!

As you asked about the transition overflows the Ethereum image, here's an explanation and a solution to help you fix the issue.

Issue Explanation

The overflow issue arises due to the default behavior of the img element in HTML. By default, images are treated as inline-block elements, which means they are aligned along the baseline of the text. This can introduce small gaps or misalignments when images are used within containers or with other images.

Key Reasons for the Issue:

1. Baseline Alignment: Inline-block elements (including images by default) are aligned to the baseline of their parent container, which can create small gaps or cause misalignment with other elements, especially if there is no surrounding text.
2. Whitespace Handling: Browsers may render a small space below the image due to the way they handle whitespace in the HTML. This space can cause the image to appear slightly larger or misaligned.
3. Line-height and Font-size: The line-height and font-size of the parent container can affect the vertical alignment of inline-block elements, causing subtle shifts or gaps.

Solution

By setting display: block; on the image, you make it a block-level element, which:

• Removes it from the inline formatting context.
• Ensures it takes up the full width of its container without any additional space below it.
• Prevents baseline alignment issues and removes any gaps introduced by inline-block behavior.

Here’s how you can apply this solution to your images:

.equilibrium-image,
.eye-image {
  display: block;
}

Why the Issue Occurs for One Image and Not the Other:

The issue with the gap occurring for one image and not the other can be related to the different ways these images are being handled in terms of positioning and layout within their container:

• Positioning and Display Context: The equilibrium-image and eye-image are both images, but they are positioned differently. The eye-image is positioned absolutely, which means its positioning is dependent on its parent container (image). This absolute positioning could be affecting the layout, especially if the parent container or surrounding elements have styles that introduce gaps or misalignment.
• CSS Transitions and Initial Positioning: The eye-image is initially positioned off-screen using top: -100%; and then transitioned into view on hover. This initial off-screen positioning and subsequent transition could introduce layout shifts or gaps, especially if the dimensions of the image are not perfectly aligned with the container.
• Inline-Block Behavior: Both images are initially inline-block elements. Inline-block elements can sometimes render with extra space below them due to baseline alignment, which can be more noticeable when the images are positioned differently (e.g., one absolutely positioned and the other not).

Applying the Fix: To ensure both images align correctly and prevent the overflow or cropping issue, setting both images to display: block; is a good solution. This eliminates the inline-block behavior that can cause these gaps.

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!