Learning how to do the hover overlay from the NFT card definitely helped me learned how to do the overlay for this component. It definitely feels like I'm getting a little better.
I didn't have any trouble with this! I've been practicing the syntax for SCSS/SASS. Any feedback on my SCSS/SASS code would be appreciated. Thanks!
Great job on the solution!
I noticed that you have reduced the opacity on your 'purple img overlay' class to get that effect. That does seem like a reasonable option. However, to get it to look even closer to the design, I would recommend using the CSS property: mix-blend-mode: multiply; on your img overlay class.
But again, that's just a suggestion. Learning different blend-modes could be fun.
Happy Coding!
Good job on the solution! I have one suggestion I'd like to give you, it looks like your component is not in the center of the page. For it to be in the center on every screen state, I'd recommend using these CSS properties on the body tag:
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Have a nice day!
Good job on the solution! I have one suggestion I'd like to give you, it looks like your component is not in the center of the page. For it to be in the center on every screen state, I'd recommend using these CSS properties on the body tag:
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Have a nice day!
Great work! if you're not sure about how to get that purple effect on image like in the design then use the css property: mix-blend-mode: multiply; on your image.
