All comments

• 

  jamaldada• 160

  @jamaldada

  Submitted about 2 years ago

  please how did y'all make the image show after being hovered on?

  

  nft

  1

  10

  

  Cr0zy07• 60

  @Cr0zy07

  Posted about 2 years ago

  Hi There,  I used the 'after' pseudo element on the outer 'div' of the image, and added relative position on that 'div'...

  Take a look at this snippet...

  .card .card-image { height: calc(320px - 3rem); width: calc(320px - 3rem); border-radius: 1rem; position: relative; overflow: hidden; }

  .card .card-image::after { content: ""; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: hsl(178, 100%, 50%, .5) url('images/icon-view.svg') no-repeat center; opacity: 0; transition: .5s ease; }

  , or better see my solution to get better understanding https://cr0zy07.github.io/training/NFT-preview-card-component/...

  Good luck...

  Marked as helpful

  0