Submitted about 2 years ago

Product Preview Card Component Design

allys• 90

@allyskorsah

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

For this project, the issue I had was in deciding how to have the image displayed. To display it as as an ordinary image or to display it as a background image for an element. In the end I settled for displaying it as a background image since I could manipulate that better.

In your opinion which is the best to use(displaying as an ordinary image or as a background image) and how best to manipulate it to get desired results.

Thanks for your contribution and feedback.

Community feedback

Account Deleted

Hi Allys,

I myself used a background image for this challenge. However, looking back, I think putting it in the HTML instead would be a better solution for accessibility - No alt tags for background images in CSS unfortunately... not sure if there are workarounds for this, but after a quick Google search, it does seem like the easiest solution would be to put it in the HTML instead.

allys• 90

@allyskorsah

Posted about 2 years ago

@LazyDuckling thanks for the feedback. I actually put it in the html at first but since the image would be changed when the screen is in mobile size I couldn't figure out how to make the switch. I'd have to look that up later. Thank you.

Account Deleted

@allyskorsah You can give classes to images, so you should be able to change it however you need to in your media query :)

Marked as helpful

Please log in to post a comment

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