Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview card

Askan Ken 60

@askan-ken

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How to change images on hover properly? I tried my best, but still looks bad

Also, how to put line below the price, I tried using border-bottom but yeah it looks bad

Community feedback

Bizzare 1,320

@godmayhem7

Posted

hi i would really say that you are not doing all that bad for a beginner but you need to put in more work and obviously you need ideas so here are some tips and ideas i will be willing give you to better your code actually being a web developer is all about having a creative mindset instead of using on mouseover and on mouseout you should just done it like dis

<div> <img class="equilibrium-img" src="image-equilibrium.jpg" alt="image-equilibrium"> <img class="view-img" src="icon-view.svg" alt="icon-view"> </div> and having your style like this(i would just show you the major styles)= remember this is just the basic styles you need to make that hover effect there are still so many bugs in the code above as a beginner you are expected to make more research on youtube and also programming is an open book exam you don't have to know it all, just master the basics and also always know what you are doing . i hope this was helpful 👌

Marked as helpful

0

@LucasNCosta

Posted

the line below you can put through the HTML using <hr> in place of "class:border", In "Julius Wyvern" you can replace the "a" with a "span", in CSS just change the color of the "span", "<div class="nft-main-container">" can replace with "main", it will be more organized, you use a lot of "a" unnecessarily, which ends up messing up your code, try to use only when necessary.

some help to clear some doubts: https://github.com/LucasNCosta/html-css/tree/main/treinar/nft-preview-card

Marked as helpful

0

@joaovitorwitt

Posted

First of all, congratulations for completing this project.

I also had trouble to complete this project

To answer your question on how to change the image on hover, you can work with two divs.

The first div would be where, in this case, the NFT image would go.

The second div would go inside the first div and this second div would contain the image you want to display on hover. I suggest using the "background-image" property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

It would look something like this:

<div class="ntf-image">
  <div class="eye">

  </div>
</div>

You can take a look on my profile to see how the code CSS looks like.

I hope this helps you. Feel free to reach out

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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