Skip to content
Submitted 2 months ago

Blog Preview Card with internal CSS

neo-the-coder•80
@neo-the-coder
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm happy to discover about css clamp function which let me to make application responsive without using @media rule.

What challenges did you encounter, and how did you overcome them?

Like I said, I was searching for a way to make app responsive without using @media rule as per challenge of the task, and I've found about css clamp() function.

What specific areas of your project would you like help with?

I need help with putting image inside figure tag in my solution so that no background color of figure tag is visible. I did not find a way to overlay img fully over figure tag without going for an absolute positioning.

Community feedback

  • P
    Huy Phan•3,420
    @huyphan2210Posted 2 months ago

    Hi @neo-the-coder,

    Your situation is quite unusual. The Browser DevTools show that your img has the same width and height as the figure, yet the background color of the figure is still visible.

    After some research, this could be due to Subpixel Rendering (Anti-Aliasing). This happens when the browser smooths the edges of elements for better visual quality, sometimes causing thin, barely visible gaps between the image and its container.

    A quick workaround is to apply:

    img {
  transform: scale(1.01);
}

    This slightly enlarges the image, just enough to cover the background.

    I know this isn't a perfect solution, but it should help for now!

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord