Design comparison
Solution retrospective
My issues with this challenge:
- How to add some space between the top of the page and the card (i used a margin-top but i'm not satisfied with it...)
- I had a problem finding out how to give the "icon-view" icon an opacity of 1, when hovering over the top image
Any help is welcome, thank you ^^
edit: thanks to @fernandolapaz my 2 issues are solved, so i had to update my 'style.css' code 😊
Community feedback
- @fernandolapazPosted almost 2 years ago
Hi,
You could center the card on the body if you wanted, using grid or flex. (First you have to make the body occupy the entire height of the viewport)
For example:
body { min-height: 100vh; display: grid; align-content: center; }
And remove the margin-top. That should work.
Regarding the icon, try adding transparency to the background color: hsla(178, 100%, 50%, 0.5). And you don't need opacity. The difference is that opacity also affects the content and colors with transparency like hsla and rgba not.
And please let me know if it worked!
I hope it's useful. 👍
Marked as helpful1@keziarktsPosted almost 2 years ago@fernandolapaz
Hi,
Thank you so much for your reply!
The first issue is now solved thanks to your solution.
For the second one, I applied the transparency to the background-color and removed the opacity. It worked well except for displaying the icon-view, so I had to add the following lines :
.img-view { ...; display: none; }
.img-container:hover .img-view { display: block; }
Once again thank you, it was really useful^^ 👍
0
Please log in to post a comment
Log in with GitHubJoin 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