Submitted almost 3 years ago

NFT Preview Card Component {HTML / CSS}

Oladimeji Abdrahman Adebayo• 80

@rahmlad-aramide

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Pls, I didn't get the hover above the Equilibrium image, any solution to that?

Community feedback

Gabriel Reis e Silva• 80

@GabrielReis11

Posted almost 3 years ago

Hello Oladimeji, to get the hover effect on my project i used this method:

On the HTML: . On the card <div> i have the Equilibrium image and another <div> with a class called "overlay" at the same position of the image with the icon-view.svg .

On the CSS: on the .overlay .I made all the adjustments of the overlay and set the opacity to 0 on the .overlay:hover .Just change the opacity to 1

I think this will help you. Here is my repository with my code in case you want to take a look. https://github.com/GabrielReis11/NFT-preview-card-component

Marked as helpful

Oladimeji Abdrahman Adebayo• 80

@rahmlad-aramide

Posted almost 3 years ago

@GabrielReis11 Thank you

Oladimeji Abdrahman Adebayo• 80

@rahmlad-aramide

Posted almost 3 years ago

@GabrielReis11 But pls, can you guide me on how i can use the pages option on github

Gabriel Reis e Silva• 80

@GabrielReis11

Posted almost 3 years ago

@rahmlad-aramide Sure, but what are you talking about? is how to download or get the style file?

Marked as helpful

Oladimeji Abdrahman Adebayo• 80

@rahmlad-aramide

Posted over 2 years ago

@GabrielReis11 sorry for replying this lately, I've gotten a solution to the problem. Thank you so much.

salem moqa• 240

@moqasalem

Posted almost 3 years ago

you can reduce the opacity of the image hover{ opacity:0.5; }

Marked as helpful

Oladimeji Abdrahman Adebayo• 80

@rahmlad-aramide

Posted almost 3 years ago

@moqasalem yes, gotcha

Dasu Rahul• 200

@dasurahul

Posted almost 3 years ago

You can use ::before and ::after on image-box to get the hover above the Equilibrium image. I hope this will help you.

Marked as helpful

Oladimeji Abdrahman Adebayo• 80

@rahmlad-aramide

Posted almost 3 years ago

@dasurahul Thank you but can you give a detailed information on how to do that?

Dasu Rahul• 200

@dasurahul

Posted almost 3 years ago

@rahmlad-aramide You can check my code here https://github.com/dasurahul/nft-preview-card-component-main

Please log in to post a comment

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