Skip to content
OverviewSolutions
14
Comments
2
Sahil Gill
@SahilGill003

All comments

  • Lucas Merino•150
    @lucas-merino-devSubmitted about 1 year 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
    Sahil Gill•320
    @SahilGill003Posted about 1 year 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
  • Tony Appiah•160
    @TonyAppiahSubmitted about 1 year 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
    Sahil Gill•320
    @SahilGill003Posted about 1 year 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