NFT Preview Card Component {HTML / CSS}

Community feedback

• 

  Gabriel Reis e Silva•80

  @GabrielReis11Posted 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

  1

  ---

  

  Oladimeji Abdrahman Adebayo•80

  @rahmlad-aramidePosted almost 3 years ago

  @GabrielReis11 Thank you

  0

  

  Oladimeji Abdrahman Adebayo•80

  @rahmlad-aramidePosted almost 3 years ago

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

  0

  

  Gabriel Reis e Silva•80

  @GabrielReis11Posted 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

  0

  

  Oladimeji Abdrahman Adebayo•80

  @rahmlad-aramidePosted almost 3 years ago

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

  0
• 

  salem moqa•240

  @moqasalemPosted almost 3 years ago

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

  Marked as helpful

  1

  ---

  

  Oladimeji Abdrahman Adebayo•80

  @rahmlad-aramidePosted almost 3 years ago

  @moqasalem yes, gotcha

  0
• 

  Dasu Rahul•200

  @dasurahulPosted 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

  1

  ---

  

  Oladimeji Abdrahman Adebayo•80

  @rahmlad-aramidePosted almost 3 years ago

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

  0

  

  Dasu Rahul•200

  @dasurahulPosted almost 3 years ago

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

  0