NFT Preview Card

Community feedback

• 

  Absorberend•390

  @AbsorberendPosted about 2 years ago

  Hey man, looking good!

  To answer your question I added the following code:

  In your HTML file:

  (after the opening <main> tag)
          <div class="eth-img-wrapper">
              <img src="/images/image-equilibrium.jpg" alt="Diamond NFT Image" id="equilibrium">
              <div class="eth-hover">
                  <img src="/images/icon-view.svg" />
              </div>
          </div>
  (before the opening <article> tag)
  

  To your CSS:

  (after #equilibrium )
  
  .eth-img-wrapper {
      position: relative;
  }
  
  .eth-hover {
      position: absolute;
      background-color: cyan;
      width: 100%;
      height: 100%;
      top: 0px;
      display: none;
      opacity: 0.5;
      justify-content: center;
      align-items: center;
  }
  
  #equilibrium:hover + .eth-hover{
      display: flex;
  }
  

  So basically what I did was I added another <div> which is invisible on top of the NFT image. Both the NFT image and the new div are child elements of the new eth-img-wrapper element I created. I made the position of the new div element absolute and the wrapper element relative, just so the new <div> can overlap/sit on top of the NFT image and will match the position + resolution of the actual NFT image. Whenever you hover over the NFT image it will make the div visible again, and there you have it.

  Hope this helps!

  Marked as helpful

  0