All comments

• 

  Lucas Merino• 150

  @lucas-merino-dev

  Submitted 11 months ago

  I really got stuck on the image hover effect.

  Can someone help me to scale down the view icon and add cyan background, please?

  

  NFT Preview

  2

  50

  

  Sahil Gill• 290

  @SahilGill003

  Posted 11 months ago

  You have used content property for displaying the view icon thats why you cannot change the dimension of image instead use pseudo element (after or before) with position absolute or you can use another div inside nft div. I am using pseudo element for this one feel free to try the other one on your own.

  // when hovering over image css will be applied to after pseudoelement
  .image:hover::after {
    background: aqua;
    content: "";
    position: absolute; 
    width: 100%;
    height: 100%;
    left: 0;
    background-image: url('./images/icon-view.svg');
    background-size: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0%,100%,100%,0.5);
    cursor: pointer;
  }
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Tony Appiah• 160

  @TonyAppiah

  Submitted 11 months ago

  Hello everyone.

  I used the 'Position' property a lot in this project for positioning the background patterns, ratings and testimonial components; it was a bit challenging but I sailed through. Are there a other ways of achieving aforementioned apart from using the 'Position' property? Thank you.

  

  Responsive Section using Flex Box

  1

  40

  

  Sahil Gill• 290

  @SahilGill003

  Posted 11 months ago

  For testimonials container you can use grid like this : Image

  @media (width >= 1440px) {
  .testimonials-container {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: 20px 20px auto 20px 20px;
      column-gap: 2rem;
  }
  
  .testimonials {
      grid-row:1/4; // span rows from 1 to 4
  }
  
  .testimonials:nth-child(2) { 
     grid-row:2/5;
  }
  
  .testimonials:nth-child(3){
     grid-row:3/6;
  }
  }
  
  

  Marked as helpful

  0

  This comment has received 1 replyShow