Submitted over 1 year ago

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

Lucas 👾• 104,580

@correlucas

Preview site View code

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

👾 Hello, Frontend Mentor coding community. This is my solution for the NFT Profile Card Component.

👻This the last of my old solution that I've cleaned the HTML code and CSS(even if is not the cleanest possible yet). Since now I'll submit only new challenges. I've changed a little bit the design and add some custom hover effect inside all elements card elements.

🎨 Custom Gradient Design
🥃 Color Spinning hover on text
🎨 Custom Icon Hover effect

Feel free to leave any feedback about my design chances and help me improve my solution or make the code clean!

Community feedback

PhoenixDev22• 16,990

@PhoenixDev22

Posted over 1 year 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

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

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

PhoenixDev22• 16,990

@PhoenixDev22

Posted over 1 year ago

@correlucas You’re welcome. Happy coding!

Vanza Setia• 27,855

@vanzasetia

Posted over 1 year 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

Lucas 👾• 104,580

@correlucas

Posted over 1 year 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?

Md5 dalton• 1,430

@md5dalton

Posted over 1 year 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

Vanza Setia• 27,855

@vanzasetia

Posted over 1 year 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

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@vanzasetia thanks Vanza, really useful 👏

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@md5dalton thank you bro! 👏👏

Rajesh Singh• 280

@Rajeshsingh127

Posted over 1 year ago

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

Phúc (Scott) Nguyễn• 430

@NationsAnarchy

Posted over 1 year 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!

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

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

Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted over 1 year 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.

LarryTheFatCat• 50

@LarryTheFatCat

Posted over 1 year 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!

John Lois Floro• 300

@loifloro

Posted over 1 year ago

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

Kamil Wieliczko• 70

@Mrbabet

Posted over 1 year ago

Lucas since when are you learning css and html?

バレンタイン 😈• 64,270

@VCarames

Posted over 1 year 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

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord