cardcomponent

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  Hey ! Great work out there i just notice that when i hover the card the hover **bg-color ** are not spanning the entire NFT image since you are using specific width and length , i suggest that you use the combination of position property which is the position : relative and position : absolute by adding this property you can achieve the hover effect same as the design. that's all happy coding !!

  .equilibrum-image {
    background-image: url(/images/image-equilibrium.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 280px;
    width: 280px;
    border-radius: 5px;
    position: relative; // add this
  }
  

  .icon-view {
    background-color: rgba(13, 244, 209, 0.5);
    opacity: 0;
    height: 280px; // remove this
    width: 280px; // remove this 
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; // add this 
    inset: 0; // add this it is the shorthand of top , left , right , and bottom which is the utilities of position property what will do if its 0 will span from top to bottom and left to right.
  }
  

  0