NFT Preview Card by Lunoxx

Community feedback

• 

  Tyrone Robertson•230

  @RoneeeyPosted about 2 years ago

  Hey there,

  In your div class="image-nft-container" add a div to place the svg icon for the eye: (i called my div for this image .class="overlay"

  <div class="overlay"> <svg id="icon-view" width="48" height="48" xmlns="http://www.w3.org/2000/svg" > <g fill="none" fill-rule="evenodd"> <path d="M0 0h48v48H0z" /> <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="#FFF" fill-rule="nonzero" /> </g> </svg> </div>

  Then style the overlay class with the following: The position of absolute will allow you to place the icon where you want it on the nft image. Make sure your NFT image is set to a position of relative otherwise the icon image won't display absolute. Set opacity to 0 so it is hidden when there is no hover state.

  .overlay { position: absolute; top: 20px; width: 310px; height: 50%; border-radius: 5px; cursor: pointer;

  background: rgba(10, 152, 177, 0.753); transition: 0.5s ease; opacity: 0; display: flex; justify-content: center; align-items: center; }

  The style your NFT image container :hover to opacity 1. So when you hover it displays: .container:hover .overlay { opacity: 1; }

  Marked as helpful

  0
• 

  Dr-Vegapunk007•140

  @Dr-Vegapunk007Posted about 2 years ago

  Hi,@Lun0xxx

  create a div inside your <section class="image-nft-container"> apply to it "position absolute" with the view icon and all styling that you need and set opacity to 0 when you hover set opacity to 1.

  I think it will be working also with display none when you hover display initial instead of opacity.

  Hope this will help you

  0

  ---

  

  Brandon•40

  @Lun0xxxPosted about 2 years ago

  @Dr-Vegapunk007 Thank you, I’m gonna try this tomorrow

  0
• 

  Tyrone Robertson•230

  @RoneeeyPosted about 2 years ago

  Take a look at my html and css files in: https://github.com/Roneeey/NFTCardPre

  It may help you better understand my advice in my earlier comment and allow you to match your own class names for your divs to mine.

  I hope you are able to follow my instructions as it is difficult when you are learning and to try follow some one else's solution when your html is set up differently and has different element class names.

  0

  ---

  

  Brandon•40

  @Lun0xxxPosted about 2 years ago

  @Roneeey Okay, thank you :)

  0