It was really hard for me to add multiple breakpoints to make the card more responsive to screen size, and hovering the eye-icon on top of the IMG was really painful to code. Maintaining image padding with the card container was something I was unable to fix.
Yet, Despite all these problems I still managed to make the card look 90% the same at the given breakpoints provided in the design folders.
@elsgoossens
Posted
Hello Murat,
I avoided the issue of overlaying 2 divs perfectly for the image color change by adding a background to the div (background-color: var(--clr-Cyan);) and making my image's opacity change on hovering.
I did run into a 2 px difference though, luckily I got help (changing the image to be display:block instead of the default display:inline fixed it)
Hope this is of any help.
Still on same challenge myself though ;-)
Keep up the good work
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
