Design comparison
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
- @godmayhem7Posted almost 2 years ago
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 helpful0 - @LucasNCostaPosted almost 2 years ago
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 helpful0 - @joaovitorwittPosted almost 2 years ago
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><div class="eye"> </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 helpful0
Please log in to post a comment
Log in with GitHubJoin 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