NFT preview card component FLEXBOX | GRID

Community feedback

• 

  Chris•180

  @chrizgxPosted almost 2 years ago

  Hey! I think there is a much simpler solution to your problem with just 2 lines of code. The reason why opacity is being applied to the eye icon is that you apply opacity on the whole div.overlay, which includes the eye image. What you can do instead, is simply replace the HSL(178, 100%, 50%) background color with the equivalent RGBA #00fff760. It's the same color, except that opacity is applied to the background-color itself and not the whole div element.

  After that, change .overlay:hover to {opacity: 1}

  O had the exact same problem, that's the solution I used too. You can see the outcome here: https://chrizgx.github.io/frontendmentor-nft-preview-card-component-main/

  And the code too: https://github.com/chrizgx/frontendmentor-nft-preview-card-component-main/

  Feel free to ask anything, I'm happy to help

  Marked as helpful

  1
• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  First position the card-img(nft) as relative and overflow hidden

  .card-img { 
     overflow: hidden; 
     position: relative; /*!important*/ 
   }
  

  Then add both the view img and card overlay color as a background ....since we assign the card-img relatively position now we assign the overlay absolute position [the overlay will streach to cover the card-img area not more than that ....thats the whole concept for the absolute and relative position in here]...to center the icon-view image i use flex ...finally i put opacity 0 because we want to appear the overlay when we hover over the card-img

  .card-overlay { 
     display: flex; 
     position: absolute; /*!important*/ 
     border-radius: 7px; 
    
     align-items: center; 
     justify-content: center; 
     flex-direction: column; 
    
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     background-image: url(./images/icon-view.svg) no-repeat center; 
     background-color: hsl( 
       178, 
       100%, 
       50%, 
       0.5 
     ); /*0.5 is opacity of color to enable transparency*/ 
     opacity: 0; 
     transition: ease-in-out 0.8s; 
   }
  

  Finally when hover ,i add opacity 1

  
  ```.card-overlay:hover { 
     opacity: 1; 
     transition: ease-out transform 0.8s; 
   }
  

  Marked as helpful

  0