NFT Preview Card Component

Community feedback

• 

  P

  Arthur•290

  @ArthurPogPosted over 2 years ago

  Hey Olaniran! Nice to see you took another challenge and completed it successfully :)

  Regarding the eye on hover, I have a solution for you but first I must say that I had no idea the <g> element even existed before I looked into your code. You blew my mind there, pal! Which is actually not saying much as I am a beginner myself so there's gonna be more of that in the future, I'm sure.

  Anyway, on to business! One of the many simple ways you can do it is with another div. Create a new div with a class="whatever" at the very top in your main and give it all the same parameters in terms of width and height as your div.imag (which I think is 300x300 pixels in your case, looking at your code) with the same border-radius:10px; and margin:25px;. Insert the eye eye-view.svg that came in your challenge files into your newly created div.whatever and classify it too, let's say class="eye-icon".

  Then your CSS should look like the following:

  Icon width so it's not huge - .eye-icon { width: 50px;}

  Now in order for the whatever container to be ABOVE everything else we need the main to have the following CSS property: main { position:relative;}

  Icon container and cyan background

  This is how the dimensions look like - .whatever { width: 300px; height: 300px; margin: 25px; border-radius: 10px;

  Now we make the container above everything else - position:aboslute;

  Add colour that is also at 50% transparency - background-color: hsla(178, 100%, 50%, 50%);

  Next, because you use z-index everywhere we are gonna want to bring it ABOVE everything else - z-index: 5;

  Set the eye in the middle with flex, you know how by now - display: flex; justify-content: center; align-items: center;

  Make it disappear - opacity: 0;

  If you want you can add a transition effect to it, this will give it a nice little animation when transitioning to a new state later. I recommend doing without this and then adding this and seeing the difference when you hover over it with your mouse. - transition: .3s ease-out;}

  So here's a recap:

  .whatever { width: 300px; height: 300px; margin: 25px; border-radius: 10px; position:aboslute; background-color: hsla(178, 100%, 50%, 50%); z-index: 5; display: flex; justify-content: center; align-items: center; opacity: 0; transition: .3s ease-out; }

  Next we need the hover effect

  Simple, we make the whole div appear when we hover over it - .whatever:hover { opacity: 1; }

  Now regarding suggestions regarding your code: I'm sure there are people on here more qualified then I to help you with this in more detail, so here goes my very basic advice: Try not select elements in general. You selected all images with the img in your CSS and made them 300px in width. Try not to do that, especially in a project where you have a plethora of img elements and instead give the image you need to resize a class and use that as your selector in CSS.

  Also, you can make your html more readable by trying to follow some simple nesting rules, like the ones here: https://scalablecss.com/bem-nesting-grandchild-elements/ You can also check Ahmed's code which is incredibly beautifully written just to see what I mean here - @Bayoumi-dev

  I think that's all. Good luck, my man!

  Marked as helpful

  1