@fernandolapaz
Posted
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 helpful
@keziarkts
Posted
@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^^ 👍
