Skip to content
Submitted over 2 years ago

NFT Preview Card Component

Tony•50
@Snorri967
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I did enjoy creating this component, the only problem I had was the view icon svg with the cyan background-color. I managed to implement it through trial and error even though I know I have done it incorrectly as when changing the zoom of the page the svg background changes size. Any help would be greatly appreciated :)

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • John Omoke•240
    @jomoke814

    Hello, @Snorri967 the best way to solve your problem will be to wrap your image that's equilibrium-view and equilibrium-image to one div like so:

    <div class="image-equil"> <img src="images/image-equilibrium.jpg" alt=""> <div class="img-overlay"> <img src="images/icon-view.svg" alt="" class="eye"> </div> </div> then you apply this CSS style: .image-equil { position: relative; } .img-overlay { display: none; background: hsl(178, 100%, 50%, 0.5); border-radius: 10px; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .img-overlay .eye { position: absolute; top: 40%; left: 40%; width: 50px; } .image-equil img { display: block; border-radius: 10px; object-fit: cover; width: 100%; } .image-equil:hover .img-overlay { display: block; cursor: pointer; } I hope this helps you and remember to apply the style according to how you have named your elements.
    Marked as helpful

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