nft card with hover effects

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello Scott! 👋

  Congratulations on completing this challenge! 🎉 Good effort on this challenge! 👍

  Regarding the :hover effect on the image, I would recommend doing the following.

  • First, wrap the equilibrium with an interactive element. It's important since the users would expect that when they click it, something would happen.
  • And then, create the overlay effect with pure CSS. Use pseudo-element and background properties to show the cyan background and the eye icon at the same time.

  If you have any questions on creating the overlay, feel free to ask them. I would be happy to help you. 😄

  Anyway, I have one thing that I would like to suggest. Now, if you the site on mobile landscape view, the card is not having enough height for the content inside it. This happens because of the height: 70%. I would recommend letting the content dictate the height of the card instead.

  That's it! Hope this helps. 😊

  1

  ---

  

  Ameh Elijah Scott•80

  @ScottDeevPosted over 2 years ago

  I really appreciate this. By wrapping with an interactive element you mean the a tag right? For the overlay, I tried using the "transition-img" to stand in for that, is there anything I should be adding there? For the height, I don't really know how to set it dynamically to be responsive to different screen. I want something that doesn't have to do with media query @vanzasetia

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @ScottDeev You're correct, wrap the Equilibrium image using an anchor tag. Also, there's no need to use section element to create the overlay.

  About the height of the card, you don't need to make it "dynamic". The most important thing is the content inside the card is visible to the user. It can be done by simply removing the height property from the .wrapper.

  Also, start practicing using media queries as soon as possible. Almost all of the Frontend Mentor challenges require media queries.

  However, there are three challenges that can possibly be done without media query, which are the two challenges you have done and the Order Summary challenge.

  Marked as helpful

  1

  

  Ameh Elijah Scott•80

  @ScottDeevPosted over 2 years ago

  I already made the necessary corrections but the sample at the design comparison is not how the site looks like. @vanzasetia

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @ScottDeev Great job with the update! 👏

  Now the card looks great on both mobile portrait and landscape view. Also, the equilibrium image now is no longer gets stretched. 🙌

  Keep up the great work!

  1

  

  Ameh Elijah Scott•80

  @ScottDeevPosted over 2 years ago

  Thanks a lot!. Looking forward to more of your comment on my future project. This really helped 😃@vanzasetia

  1
• 

  Agustin•340

  @agusc01Posted over 2 years ago

  Hi Scott, you have a lot of things to improve. The challenge doesn't look like the image, change your mind when you want to make a card, it's to much width, not always have to use percent units.

  Anyway here's a better way to create (in my personal opinion) a :hover on your challenge, change your selector CSS

  .transition-img:hover { opacity: 1; }

  for

  .img-section:hover .transition-img { opacity: 1; }

  Keep coding ! Practice makes perfect

  1

  ---

  

  Ameh Elijah Scott•80

  @ScottDeevPosted over 2 years ago

  Thanks so much for the feedback. Will work on the project again@agusc01

  1
• Account deleted

  Hi there,

  • the height of the wrapper is a little b it too much try to decrease it to 60%

  0

  ---

  

  Ameh Elijah Scott•80

  @ScottDeevPosted over 2 years ago

  thanks!, will do just that!@Old1337

  1

  

  Ameh Elijah Scott•80

  @ScottDeevPosted over 2 years ago

  Reduced it but nothing changed at the design comparison, if you view the site live it will have a different look@Old1337

  0

  Account deleted

  @ScottDeev you need to generate a new screenshot

  0

  Account deleted

  @ScottDeev you need to generate a new screenshot

  0