Design comparison
Solution retrospective
Any advice is appreciated, especially with my flex-box as it is one of my first experiments learning this!
I can't figure out how to get the NFT Card image to change its state for :hover. - any tips on accomplishing this? I tried overlaying the aqua background color with opacity and z-index but that didn't work. Thank you!
Community feedback
- @zeerobitPosted over 2 years ago
Hi Martha, here are a few pointers:
- You don't necessarily need to wrap the equilibrium image in 2 divs instead use one of the divs to also wrap the icon-view image. Here is an example:
<div class="img__container"> <a href="#"> <img src="images/image-equilibrium.jpg" class="eq__img" alt="" aria-hidden="true" /> </a> <div class="overlay"> <a href="#"><img src="images/icon-view.svg" alt="" aria-hidden="true" / class="icon-view"></a> </div> </div>
- In order to get the hover effect, add position relative to the image-container and on the overlay use position absolute so you can place the overlay on top of the image-container, convert the hsl background color to rgb [rgb(0, 255, 247, 0.4);] which lets you add the opacity for the transparency color effect, use flexbox to center the icon-view image then add opacity: 0; to hide the overlay. Then add opacity: 1; on hover so the overlay appears when you hover
.overlay:hover { opacity: 1; cursor: pointer; }
- ETH is missing the 0.041 in the front
- The creator part can be wrapped in figure, figcaption instead of div for better semantics
- Use rem instead of px since it's not scalable
- Remove the height from .NFT-card, let the content dictates the height and use max-width instead of width
- You don't need to add width: 275px on each section to prevent them from touching the edges, simply add a padding on the container to achieve that
- For images you just need to add
max-width: 100%;
anddisplay: block;
and not a set width and height - I'd suggest you to add a css reset in your stylesheet to avoid any weird browser behaviors, i use this css reset
Hope these help, Happy coding !!!
Marked as helpful0@marthaeasonPosted over 2 years ago@zeerobit Wow thank you so much- this was so helpful! Lots learned- Thank you!
0 - @shahidafridi23Posted over 2 years ago
Hi @marthaeason , you did a good job on this challenge, for hover state add HTML and style before, with opacity 0 and then add hover state with opacity 1, hopefully, this will work.
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