Product preview card for desktop and mobile

Hi @MURRAY122,

I think, the most elegant solution for responsive images is using the <picture> element. Check out this guide on MDN about responsive images, it goes into detail about all the use cases.

I think, your solution of the hover effect is perfectly fine. The alpha channel is responsible for transparency, so adjusting that would only make the background behind the button more visible. However, you might be interested in CSS filter functions for applying all kinds of cool effects.

Hope you will find these useful. Keep up the good work!

You're doing great so far! Here's one of the solution I use for your image issue:

You make 2 <img> tags with different images together, maybe assign a class to work with CSS later. Suppose you got one <img> with mobile image and another <img> for desktop image. Then, for it to change, you put all of that <img> into @media queries and set property display: none when you want to hide it and set display: block for an image you want to show.

Suppose you got your images and you decided that 720px will be your breakpoint. Set that @media query to (max-width: 720px), which means anything that's below 720px will show up (smaller devices). You might put your desktop image to display: none and mobile image to display: block.

You don't have to do another @media (min-width: 720px) for desktop since ANYTHING that's not in media query works similar to that. So, out of @media query, you set your desktop image to display: block and then your mobile image to display: none

Other than that, great job! Keep coding✌⌨