NFT-card-preview

Community feedback

• 

  P

  Arthur•290

  @ArthurPogPosted over 2 years ago

  Hey Dave! Good try with the challenge. I completely feel your pain.

  There are many ways you can solve your problem, one of them would be to create a new div above your equilibrium image and put the icon svg as an image into it and center it using CSS. Give it exactly the same dimensions as your equilibrium image AND set the .card's position to position:relative; so that you can give the new icon div that is inside it a position:absolute;. Then set the icon div's background to the cyan color but with 50% transparency with, let's say, rgba values and its opacity to 0 so it's always hidden. Then select the same div with a :hover pseudo-selector and make the opacity: 1;. It should work. If it doesn't, let me know.

  Also, you don't need to set the flex-direction if you only have one element n your container. So you can delete that from your body and add a min-height: 100vh which will force it to use the full height of the screen to calculate the distances.

  Also instead of telling the .card how high it should be, give it a max-width of let's say 350px. Delete both heights in .card and the margin-top so your content perfectly centers no matter the screen.

  You can also give the body a margin:0; so the scrollbar disappears on the right.

  Good luck, my good man!

  1

  ---

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @ArthurPog Good explanation!

  0
• 

  Khalil Nazari•220

  @khalilnazariPosted over 2 years ago

  Hi, there is no eye image when hoving on the image. The rest seems good. You can have a look at my solutions if you want to improve it.

  Good luch.

  0