Submitted over 2 years ago

Responsive preview card component using HTML and CSS

LiBee• 390

@Li-Bee

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Here is my solution to the NFT preview card component. I also did the responsive mobile design to.

Would appreciate feedback on the design and any pointers on my code - new to coding.

Would also like to know what other peoples solution were in regards to how they did the color overlay on the image. Please review my version and give your thoughts/alternatives.

Community feedback

bikeinman• 1,080

@BikeInMan

Posted over 2 years ago

Excellent !

About Hover, I did the same as you.

But later I was able to do it with ::before in a much simpler way. Setting the bg-color and img from css on hover.

Just a thought, you can also use a border-bottom or border-top to achieve the line.

Marked as helpful

LiBee• 390

@Li-Bee

Posted over 2 years ago

@BikeInMan thank you for the feedback!

Do you have example code with regards to using ::before? Did you do that for both the blue color and the eye icon? Good idea regarding the border line did not think of that.

bikeinman• 1,080

@BikeInMan

Posted over 2 years ago

Congratulations.! Looks nice. May be you can round the borders on hover and call it done.

Marked as helpful

LiBee• 390

@Li-Bee

Posted over 2 years ago

@BikeInMan good idea! Thanks

bikeinman• 1,080

@BikeInMan

Posted over 2 years ago

Yes, I was able to do both, cyan bg and eye-icon. Just committed to git to reflect the changes. Check out the following url and last two rule sets in css, and the HTML too.

https://bikeinman.github.io/frontendmentor-01-nft-preview-card-component-main/

If you checked out my url before, you may have to disable cache in dev.tools and reload to see the changes. Otherwise, it is okay.

Let me know if you find any mistakes or a better way to do overlays. Overlays, looks like they are everywhere and it is an important skill to have.

I was also working on responsiveness and there could be some issues. Let me know, if you find any. Thanks and Good Luck.

LiBee• 390

@Li-Bee

Posted over 2 years ago

@BikeInMan I did it thanks. One thing i did - based on advice - was i used :before pseudo element for the color overlay and the used a :after pseudo element for the eye icon to control the transparency of the elements separately.

Please log in to post a comment

Join 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