NFT card component responsive and with hover effects
Design comparison
Solution retrospective
I think I did right the challenge, but I was'nt sure about how to implement the hover effect on the main image, with the blue background when hovering and the eye icon appears.
After some thinking and stak overflow research, I figured out this:
- In HTML, the img element is within a figure element (this provides more accesibility info instead of using div). So I applied a background-color to the figure to make it blue
- In CSS, when hovering the image, it gets opacity and the blue bakcground is shown
- For the icon to be shown, I inserted it on HTML and then made its position absolute to center it on the image.
The code of this part is the following:
<figure class="card__figure"> <img src="images/image-equilibrium.jpg" alt="nft image" class="card__img"> <figcaption class="offscreen">NFT image</figcaption> <img src="./images/icon-view.svg" class="card__view"> </figure>
img{
display: block;
width: 100%;
}
.card__figure {
position: relative;
background-color: var(--hover-color);
border-radius: 10px;
overflow: hidden;
}
.card__view {
height: 80px;
width: auto;
position: absolute;
top: -100px;
left: calc(50% - 40px);
z-index: 1;
}
.card__img:hover {
opacity: .5;
cursor: pointer;
transition: .2s;
}
.card__img:hover ~ .card__view {
top: calc(50% - 40px);
}
Do you think it's acceptable? What other ways can be valid?
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi develoba,
Congratulation on finishing this challenge. Great job on this one! I have few suggestions regarding your solution:
HTML
- The most important part in this challenge interactive elements. 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 you can use
<a>.You should have used
<a>to wrapEquilibrium #3429andJules Wyverntoo.- The link wrapping the equilibrium image should either have
Sr-onlytext, anaria-labeloralttext that says where that link takes the user.
There are so many ways to do the hover effect on the image, The one I would use is pseudo elements
::before, ::after. You can use pseudo-elements to change the teal background color to hsla. Then the opacity can be changed from 0 to 1 on the pseudo element on the hover. Also using pseudo elements makes your HTML more cleaner as there's no need for extra clutter in the HTML.The icon view does not really need to be in the HTML. You can use CSS for it.
If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the
<div class="card__line"></div>, you can useborder-top:to the avatar's part.You can check my solution , it might help
Overall great work! Hopefully this feedback helps.
Marked as helpful0@develobaPosted about 2 years ago@PhoenixDev22 thank you so much for your suggestions, I really appreciate it. Thanks to this, I could review my code and make those changes, although I had to get a little help from your code to center the content of the ::before element for the image.
In short, with your help I can keep practicing good ways to code and it was very helpful. Thanks!
1@PhoenixDev22Posted about 2 years ago@develoba
Glad to hear that it was helpful. Happy coding!
0
Please log in to post a comment
Log in with GitHub
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