Responsive preview card component using HTML and CSS

Community feedback

• 

  bikeinman•1,080

  @BikeInManPosted almost 3 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

  1

  ---

  

  LiBee•370

  @Li-BeePosted almost 3 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.

  0
• 

  bikeinman•1,080

  @BikeInManPosted almost 3 years ago

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

  Marked as helpful

  0

  ---

  

  LiBee•370

  @Li-BeePosted almost 3 years ago

  @BikeInMan good idea! Thanks

  0
• 

  bikeinman•1,080

  @BikeInManPosted almost 3 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.

  1

  ---

  

  LiBee•370

  @Li-BeePosted almost 3 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.

  0