Skip to content
OverviewSolutions
10
Comments
5
Dr-Vegapunk007
@Dr-Vegapunk007

All comments

  • Brandon•40
    @Lun0xxxSubmitted about 2 years ago

    Hi guys, my problem is that I don't know how to show the view icon when we hover the NFT image. If somebody can tell me how to do it, it would be great :) Thanks

    NFT Preview Card by Lunoxx

    3
    Dr-Vegapunk007•140
    @Dr-Vegapunk007Posted about 2 years ago

    Hi,@Lun0xxx

    create a div inside your <section class="image-nft-container"> apply to it "position absolute" with the view icon and all styling that you need and set opacity to 0 when you hover set opacity to 1.

    I think it will be working also with display none when you hover display initial instead of opacity.

    Hope this will help you

    0
  • Dr-Vegapunk007•140
    @Dr-Vegapunk007Posted about 2 years ago

    Hello @oliverjfred,

    • set the height of the img same as the width this will solve your problem.
    • another way to do it is to place it directly inside <section class: "body"> without a div and apply to it position: absolute; border-radius: 50%; border: solid 5px white; and position it with right, top or left, bottom.

    Hope this will help you

    0
  • Chibuzor Isaac•20
    @ChibuzorIsaacSubmitted about 2 years ago

    I personally found replacing the image on screen resize from mobile to desktop a huge challenge. Finally used the 'display: none' property and it worked. Feel free to let me know if there's any other way I could've done it. Also, I'd appreciate feedbacks on the design in general.

    Product Preview Card Component Challenge

    4
    Dr-Vegapunk007•140
    @Dr-Vegapunk007Posted about 2 years ago

    Hello friend, Display: none; is not the best practice for this situation try to learn about <picture> element and use it in this situation

    Marked as helpful
    1
  • threshold•50
    @thresholdtechSubmitted about 2 years ago

    Hi Guys,

    this is my fifth project. Well, it's so confusing tbh, and here's my result. I use 'grid' here, to divide the image and the text, I don't know if that is the right choice. I have an issue here, the discount price won't be centered when I use vertical-align: middle, any adv? TIA

    Product Preview Card Component (Perfume)

    3
    Dr-Vegapunk007•140
    @Dr-Vegapunk007Posted about 2 years ago

    Hi @thresholdtech, you can use this to centered the discount price

    .price-remark{
display: flex ;
align-items: center ;
}
.h1,
.h4{
margin:0 ;
}

    I use different method to do it in my solution you can see it here : https://dr-vegapunk007.github.io/

    0
  • Nutchapon Makelai•270
    @kodaicoderSubmitted about 2 years ago
    • still got some confuse on image positioning , may be have better way to adjust a image position.
    • about components in react, may be it can splitting up more than 3 components that I has create.

    Product preview card component

    1
    Dr-Vegapunk007•140
    @Dr-Vegapunk007Posted about 2 years ago

    Hi @NutchaponMake , you can set a div as background instead body with this styling:

    display: flex ;
position: fixed  ;
justify-content: center ;
align-items: center ;
left: 0  ;
width:100% ;
top: 0 ;
height: 100% ;

    you can see it in my solution link (https://github.com/Dr-Vegapunk007/Dr-Vegapunk007.github.io)

    Marked as helpful
    1