NFT Preview Card (Vanilla CSS + Custom Design and Hover Effects)

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi Lucas,

  Congratulation on finishing another Frontend mentor challenge.

  Another great solution! I have some suggestions regarding your solution, if you don't mind:

  • The most important part in this challenge is the interactive element. Since there's a :hover state on the image and means it's interactive, So there should be an interactive element around it. When you create a component that could be interacted with a user , always remember to include interactive elements like(button, textarea,input, ..) For this imagine what would happen when you click on the image, there are two possible ways:

  1: If clicking the image would show a popup where the user can see the full NFT, here you use <button>.

  2:If clicking the image would navigate the user to another page to see the NFT, here use <a>.

  • You should have used <a> to wrap Equilibrium #3429.

  • The link wrapping the equilibrium image (image-equilibrium ) should either have Sr-only text, an aria-label that indicates where the link navigate the user(not describes the image).

  • If you wish to draw a horizontal line, you should do so using appropriate CSS. Remove the <span class="line"> </span>, you can use border-top: to the avatar's part.

  • To use more semantic tags , you may use <figure> and <figcaption> for the avatar's part.

  • For any decorative images, each img tag should have empty alt="" and add aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in (`icon-view).

  • The alternate of the avatar image should not be avatar, it’s meaningless. You can use the creator's name Jules Wyvern.

  • There are so many ways to add the hover effect on the image , The one I would use, using pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover. There is no need for a extra clutter in the HTML. The icon view doesn’t really need to be in the HTML. You can use CSS for it.

  • Great work with animations, you have added some nice animations, so it's best to make sure that the animations are off for the users who requested to minimize the amount of non-essential motion it uses.. You can use the prefers-reduced-motion query to do that.

  Aside these, Excellent work! Hopefully this feedback helps.

  Marked as helpful

  5

  ---

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @PhoenixDev22 Thank you for this detailed feedback, I'll for sure apply the changes!

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @correlucas You’re welcome. Happy coding!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Lucas! 👋

  Nice work on this challenge! 👍 The new design for this challenge looks good! 🙌 Also, there are a lot of cool animations for the card! 👏

  But, two things could be improved.

  • Firstly, I would recommend using the prefers-reduced-motion media query to turn off the animations for people who prefer not to see them. Animation can be harmful to some people so you want to make sure that the users can control the animations.
  • Secondly, I suggest using the modern CSS reset from Piccalilli for your next project. It focuses on accessibility as well. For more information, I would recommend reading his article to learn more about his CSS reset.

  I hope this helps! Keep up the good work! Happy coding! 😄

  Marked as helpful

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @vanzasetia Hey Vanza, that's interesting! Can you please explain me how I can add this feature for reduced motion? Is that a media query?

  0

  

  Md5 dalton•1,430

  @md5daltonPosted about 2 years ago

  Hello @correlucas.

  Yes it's a media query. This is how I implement it:

  @media (prefers-reduced-motion) {
      * {
              animation: none !important;
          }
  }
  

  Here's a link to MDN web docs if you want to read more about it: Prefers Reduced Motion

  Marked as helpful

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @correlucas

  You can follow what @md5dalton has suggested. But, I would prefer adding transitions or animations inside the prefers-reduced-motion. I would call this a no-motion-first approach.

  For example:

  @media (prefers-reduced-motion: no-preference) {
    .button {
      transition: background-color 300ms ease-in-out;
    }
  }
  
  .button:hover {
    background-color: white;
  }
  

  So, you build the site without animation first. Then, you want to only add animation or transition with prefers-reduced-motion media query.

  This way, the users who use a browser that doesn't support the prefers-reduced-motion media query, won't see the animation. It is good because those users can't control the animation so at least they won't see the animation.

  Marked as helpful

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @vanzasetia thanks Vanza, really useful 👏

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @md5dalton thank you bro! 👏👏

  0
• 

  Rajesh Singh•280

  @Rajeshsingh127Posted about 2 years ago

  I don't have feedback. I'm a beginner and your code is helping me a lot!

  1
• 

  Phúc (Scott) Nguyễn•430

  @NationsAnarchyPosted over 2 years ago

  Not sure if there's anything wrong, however, I couldn't view the source code on GitHub, Lucas :< I'd love to steal the code you did for the avatar since I couldn't really do it by myself xD. Otherwise - great job as always, thank you very much!

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @NationsAnarchy Hey Phúc, I'll make it public and you check it in few minutes. Thank you for the kind words.

  1
• 

  Chukwudobe Micah Chinedu•700

  @chukwudobe-MicahPosted about 2 years ago

  Hey, please I wanna ask a question. How did you do the active stage for the image? Did you put the cyan colour over the image (I don't know if that's possible with CSS) or is the cyan colour the the background color of the view icon? Please I need a reply to help me with my own work.

  0

  ---

  

  LarryTheFatCat•50

  @LarryTheFatCatPosted about 2 years ago

  Hey! @chukwudobe-Micah

  So, what Lucas has done for this background image overlay is that he has used a :hover for the img then set the opacity to 0 making that completely see through! Once it has been set to see through, what Lucas does next is that he uses the :hover effect on his div class that is labeled card-overlay and then sets the opacity to 1 and uses a transition effect, the transition effect is optional but makes the design much more smooth and beautiful!

  Here is the code for it:

  .card-overlay {
    display: flex;
    position: absolute;
    border-radius: 7px;
  
    align-items: center;
    justify-content: center;
    flex-direction: column;
  
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(./images/icon-view.svg) no-repeat center;
    background-color: hsl(178, 100%, 50%, 0.5);
    opacity: 0;
    transition: ease-in-out 0.8s;
  }
  
  .card-overlay:hover {
    opacity: 1;
    transition: ease-out transform 0.8s;
  }
  
  

  Reminder, please dont copy all of the code, it's best you understand what is going on then apply your knowledge onto it!

  Hope this helps!

  0
• 

  John Lois Floro•300

  @loifloroPosted about 2 years ago

  hi! i looked up for your codes and asking why you aren't using <figure> tag on your images?

  0
• 

  Kamil Wieliczko•70

  @MrbabetPosted about 2 years ago

  Lucas since when are you learning css and html?

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  Congrats on another great looking project!

  Adding on to what @PhoenixDev22 pointed out, to make your content fully accessible to all users, you want to implement rem/em going forward. I attached an article, which goes into more detail:

  https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

  The entrance animation does take a little long before it appears into users screen, so I would recommend reducing the time on that.

  Regarding the use of <figure> and <figcaption> for the author/avatar section, generally those are use as a reference to a certain content; like when website post a picture and right underneath it, it has the source of it.

  A good example of <figure> and <figcaption> usage is Bugatti's website: https://www.bugatti.com.

  If you look at their website and scroll down to their model/universe section you'll see how they implement it.

  More info regarding <figure> and <figcaption>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

  0