You can position second image as position:absolute on top of original image. Remember to make container of original image as position:relative.
Then you can set position of second image to desired location with top, bottom, left and right properties.
If you are unsure, learn more about different css positions. It is very important thing to learn in your css journey.
Second, you don't need to put filter on original image to show the color on hover.
All you need is put background-color on the container of original image on hover. Lower the opacity of the color so that the image stays visible.
Just finished another challenge. I struggled getting the product description to align right. I was wondering if I can get feedback on how to improve my CSS so the product texts are aligned right.
You are using id's for each element and then style them using id's. Use class instead of Id for most part. Because class names are reusable and you can have multiple elements with same class name and one element with multiple class names.
Regarding your question about left align of text.
You need to do few things for it,
a) Remove your left margins from each element in product description part.
Instead give a padding to whole product description part and it will keep all the content inside that padding.
b) Put text-align: left on product Description div instead of putting it on individual elements.
c) In price section where you specified display:flex change the justify-content from center to start.
You don't need to specify display: block everywhere. Remove it from all elements except img and you won't see any difference.
I see you are specifying margin: 0 auto in lot of places. I understand you are trying to center things but as Abdul mentioned in his comment, there are better tools to center elements in css.
I see you specified padding for img and p element to keep them inside the wrapper. The best solution is to just give padding to wrapper itself and all elements will stay inside that padding.
Quick suggestion
Instead of using div and span elements to create theme toggle.
The easier and more semantic way is to use 3 radio button wrapped in a container. Then style the radio button the way you like.
Here, you can choose min,max and step.
When user moves the thumb on the track (slider bar), the thumb automatically goes to the next value. So user can only choose the pre-defined values rather than every possible value between min and max.
Value attribute gives the slider a default position when page loads.
further you can style the thumb and track in css the way you like.
Couple of cards are not visible because of their background color being white. Try changing the background color of the body to the one provided in the style guide or add box shadow them.
I have one main questions and that is how do you make the line through the button for the design of the site. I tried doing button::before, but the line would only appear on the top.
Thanks
One method is to create horizontal line as div and give it height of 1px. Then put horizontal line and button in flex container to put them next to each other and align-items: center.
Another method is ::before pseudo element, like you mentioned. But you can move the before element with top, left, right and bottom properties, just like you do with position absolute element.
or you can try 'vertical-align: center' on ::before element.