NFT preview card component [5]

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Nice well done. One thing, you are missing the change in background color and show the eye icon on hover. Here is how you can fix this

  .image {
    position: relative; /* add this line, you will need it to create the overlay */
    background-color: var(---cyan);
    background: url(../images/image-equilibrium.jpg) no-repeat;
    background-size: cover;
    cursor: pointer;
    width: 100%;
    height: 280px;
    border-radius: 10px;
    margin-bottom: 25px;
    background-position: center;
  /*   opacity: 1; */ /* you don't need this */
  }
  
  /* add this to create the overlay */
  .image::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: hsla(178, 100%, 50%, 0.35);
    opacity: 0;
  }
  
  .image:hover::before {
    opacity: 1;
  }
  
  /* you can remove this entirely */
  /* .image:hover {
    opacity: 0.5;
  }
   */
  

  You still need to add the border radius and the eye icon

  0