Skip to content
Submitted over 1 year ago

Product Preview Card with only HTML/CSS

yoshi718•160
@yoshi718
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I was having issues with sizes using the background image, I finally had to use actual pixel dimensions to get the images to show and size properly. If anyone has different ideas about how to do this I would appreciate hearing them. Thanks...

Community feedback

  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    You are not supposed to make that a background images its an important aspect of the design not a decorative images, so you supposed to add in the markup as an img tag

    1
    yoshi718•160
    @yoshi718Posted over 1 year ago

    My problem was how do you switch images in only css.

    0
  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    You can use media querries to change images for different conditions, alternatively, you can do it in just html by using the picture tag, look it up.

    0

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