NFT card component

Community feedback

• 

  Arturo López Rosa•210

  @ArturoFLRPosted over 2 years ago

  Thank you! It´s a very elegant and simpler solution, with fewer containers. I'm on it.

  Two suggestions:

  • Change the opacity directly on the background color, so it doesn't affect the icon.

  • Put a border-radius on .originalImage. Now it´s completely square.

  Thanks again!

  0
• 

  Arturo López Rosa•210

  @ArturoFLRPosted over 2 years ago

  Hello!

  I have also used the same image in both containers so that they have exactly the same size without having to give specific sizes to the height and width.

  I have seen other solutions and I have not found any that do not give specific sizes.

  It would be very interesting if someone has found another solution.

  0

  ---

  

  Pankaj Thapa•150

  @thapa14Posted over 2 years ago

  @ArturoFLR Hello..

  I have a different solution to achieve this.

  We can use :before Selector to change the color of the image.. here is the solution ..

  **this is html **

  <div class="card__image">
          <div class="originalImage">
            <img src="./images/image-equilibrium.jpg" alt="img">
          </div>
        </div>
  

  and this is its CSS

   .card__image{
      width: 100%;
      border-radius: 1rem;
      cursor: pointer;
      position: relative;
  }
  
  .originalImage{
      width: 100%;
  }
  .originalImage img{
      width: 100%;
      border-radius: 1rem;
  }
  
  .originalImage::before{
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: var(--cyan) url(./images/icon-view.svg)no-repeat center center;
      opacity: 0.6;
      visibility: hidden;
  }
  

  i have uploaded my solution please see it there and provide your feedback.

  Happy coding...!

  0