NFT Project Solution

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi Ryan!

  If you want to make the eye effect you can try this:

  To the nft_number class give the following attributes.

  border-radius: 1.25rem;
  overflow: hidden;
  

  It is more to the image if you want to remove the border-radius since with the overflow we can eliminate it directly.

  To the image give it the display: block attribute because by default the images have a ghost spacing under them.

  Now create a div above the image and inside the div with the class nft_number and give it the following attributes.

  width: 100%;
  min-height: 350px;
  position: absolute;
  transition: all 200ms;
  

  And create to this a hover with the following attribute:

  background-color: rgba(43, 255, 248,0.5)

  This generates the background color cyan but with low opacity so that it is translucent.

  Now with all this you are almost done add the image with the pseudo elements using ::after and positioning it in the middle with position and tranform: transition() or if you hit the display: flex box which is how I will do it next it will be positioned in the middle.

  1

  ---

  

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  @Sdann26

  Continuing with my explanation you can take this solution:

  .nft_eye:hover::after {
    content: url(./Images/icon-view.svg);
  }
  
  .nft_eye {
    width: 100%;
    min-height: 350px;
    position: absolute;
    background-color: rgba(43, 255, 248);
    transition: all 200ms;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  nft_eye is the class we create for the little box above the image.

  1