NFT Preview Card Component with hover effects

Community feedback

• 

  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

  1

  ---

  

  The Requiem•330

  @TheRequiemPosted almost 2 years ago

  @yishak621 Woah, I never realized that I could use flexbox along with relative positioning. This is super helpful. Thanks!

  0
• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  For the hr horizontal row u can make it thin by removing all borders except border top....u can create it like these

  /*horizontal row line*/ 
   hr { 
     border-bottom: 0; 
     border-left: 0; 
     border-right: 0; 
     border-top: 1px solid; 
     height: 10px; 
     color: var(--color-line); 
     margin-top: 1.5rem; 
   }
  

  1

  ---

  

  The Requiem•330

  @TheRequiemPosted almost 2 years ago

  @yishak621 I also used border-top but what I did not do is set all the other borders to 0. Thanks!

  0
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey, looks nice, I would add some transitions for hover states so it looks more smooth ☺️

  1

  ---

  

  The Requiem•330

  @TheRequiemPosted almost 2 years ago

  @catherineisonline Thanks, I almost thought about adding a transition but I thought it would be overdoing it, add that to the fact that I never tried hover or transition effects before but you're right, a quick transition would look smoother than an instant hover!

  0