NFT preview card component

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 12 months ago

  Great job on the challenge !

  As to the ::after and opacity issues: You can't place an after on an <img>, but you can wrap the image in a div and use after on the div. Then, to show the icon, you define the hover state of the parent div.

        .card-img-top {
          position: relative;
        }
        .card-img-top::after {
       /* Place the ::after on top of image container */
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
       /* Place icon in center of div*/  
          display: grid;
          place-items: center;
          content: url(./nft-preview-card-component-main/images/icon-view.svg);
          background-color: hsl(215, 51%, 70%);
   
          opacity: 0;
        }
        /* change the pseudo-element based on hover of the parent */
        .card-img-top:hover::after {
          opacity: 0.5;
        }
  

  Hope this helps.

  Marked as helpful

  1

  ---

  

  Prajwal H C•210

  @prajwalhc-18Posted 12 months ago

  @beowulf1958 Super code and thanks for helping me out , it means alot to a newbie and from your code it helped to increase and analyze the problems

  0