NFT preview card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Michael Obi! 👋

  Congratulations on finishing this challenge! 🎉

  I would recommend changing the link of the GitHub repository to the project repository (not your GitHub account). Currently, it is pointing to https://github.com/mykexie. Luckily, I can find the GitHub repository for this project easily.

  Anyway, some suggestions from me.

  • I notice that the Equilibrium image has no border-radius. If you see the design, the image has a little bit border-radius on all sides. So, I recommend adding the border-radius.
  • Alternative text should not be hyphenated (like code). It should be like normal text.
  • The site is missing the interactive elements. I recommend wrapping the text content with an interactive element like an anchor tag to any elements that have interactivity.

  Hope this helps. 🙂

  Marked as helpful

  1

  ---

  

  Michael Obi•70

  @mykexiePosted over 2 years ago

  Hello Vanza Setia, I've updated my solution and my code accordingly..

  Please, any idea on how to add transition to image background, on hover ?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @mykexie Good job on improving your solution! 👏

  I don't notice any background-image on the CSS. In general, it depends on what you are going to do. You can add a transition to the opacity of the background image or the size (and much more).

  I assume that you have a specific problem. So, could you provide more information about what you are trying to achieve?

  0

  

  Michael Obi•70

  @mykexiePosted over 2 years ago

  Hello @vanzasetia,

  When you hover over the the image there, an image (like an eye) pops up with a transparent background. I would like to add transition to that hover event. I have tried adding transition to the static image and the pop up image, but it didn't work.

  However, I have completed a new challenge, kindly glance through the code 🙏

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @mykexie Okay, I get it. First, before creating the overlay, we need to get the HTML and the img styling right first.

  • First, we need to wrap the image with an anchor tag (or button depending on what you would think will happen after the users click it). Then, add aria-label to give some text content.
  • Second, make the img as a block element and then set max-width: 100%. Make sure you leave the alt="" empty.

  Now, for creating the overlay.

  • First, create a pseudo-element from the anchor tag (it could be ::after or ::before).
  • Second, make the pseudo-element fill the entire image by using absolute positioning.
  • Then, you can target the pseudo-element when the anchor tag is hovered, then show the background color. (a:hover::after)
  • Note: adjust the opacity of the background color by changing the alpha value. Not, by using the opacity property.
  • Next, create a second pseudo-element for the eye icon.
  • After that, make sure that it fills the entire image (the same as the first pseudo-element).
  • Now, instead of adding background color, it will show the background image.
  • You can set the opacity to 0. After that, when the users hover the anchor tag then set the opacity to 1.
  • Lastly, you can add transition to the opacity property to make the eye icon show smoothly.

  Oh, I have given some feedback on your new solution as well. 😉

  Marked as helpful

  1

  

  Michael Obi•70

  @mykexiePosted over 2 years ago

  Hello again, @vanzasetia

  for the transition: I replaced display:none with opacity:0, then opacity to 1 on hover...with a little abracadabra lol - BOOM it worked. Thanks for the 'opacity' insight.

  code has been updated....

  1