Skip to content
OverviewSolutions
14
Comments
4
Tyrone Robertson
@Roneeey

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
    Tyrone Robertson•230
    @RoneeeyPosted about 2 years ago

    Take a look at my html and css files in: https://github.com/Roneeey/NFTCardPre

    It may help you better understand my advice in my earlier comment and allow you to match your own class names for your divs to mine.

    I hope you are able to follow my instructions as it is difficult when you are learning and to try follow some one else's solution when your html is set up differently and has different element class names.

    0
  • 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
    Tyrone Robertson•230
    @RoneeeyPosted about 2 years ago

    Hey there,

    In your div class="image-nft-container" add a div to place the svg icon for the eye: (i called my div for this image .class="overlay"

    <div class="overlay"> <svg id="icon-view" width="48" height="48" xmlns="http://www.w3.org/2000/svg" > <g fill="none" fill-rule="evenodd"> <path d="M0 0h48v48H0z" /> <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="#FFF" fill-rule="nonzero" /> </g> </svg> </div>

    Then style the overlay class with the following: The position of absolute will allow you to place the icon where you want it on the nft image. Make sure your NFT image is set to a position of relative otherwise the icon image won't display absolute. Set opacity to 0 so it is hidden when there is no hover state.

    .overlay { position: absolute; top: 20px; width: 310px; height: 50%; border-radius: 5px; cursor: pointer;

    background: rgba(10, 152, 177, 0.753); transition: 0.5s ease; opacity: 0; display: flex; justify-content: center; align-items: center; }

    The style your NFT image container :hover to opacity 1. So when you hover it displays: .container:hover .overlay { opacity: 1; }

    Marked as helpful
    0
  • Tyrone Robertson•230
    @RoneeeyPosted about 2 years ago

    You need to wrap your 3 divs for the cards in a div. See below:

    <DIV CLASS="CONTAINER"> <--------- THIS IS THE WRAPPER FOR THE 3 DIVS BELOW. MAKE SURE TO CLOSE IT OFF AFTER YOUR 3RD DIV ( <div class="terceiracoluna">)

    SET THE ABOVE CONTAINER TO DISPLAY FLEX AND JUSTIFY CONTENT AND ALIGN ITEMS CENTER. AFTER THAT YOU NEED TO ADD IN THE MEDIA QUERY AND SET THE CONTAINER/WRAPPER TO DISPLAY BLOCK OR FLEX-WRAP: WRAP AND CHANGE THE STYLES OF THE ELEMENTS ACCORDINGLY.

    CHECK OUT THE LINK BELOW FOR A FLEXBOX TUTORIAL THAT EXPLAINS IT REALLY WELL. ALSO READ UP ON MEDIA QUERIES ON W3SCHOOLS.COM.

    https://www.youtube.com/watch?v=3YW65K6LcIA&ab_channel=TraversyMedia

    CREATE BUTTONS USING THE BUTTON ELEMENT - <button> - YOU WILL NEED TO STYLE IT IN YOUR CSS.

    <div class="primeiracoluna"> <img src="images/icon-sedans.svg" alt="logosedan"> <h1>SEDANS</h1> <p class="paragrafo"> Choose a sedan for its <br> affordability and excellent <br> fuel economy. Ideal for <br> cruising in the city or on <br> your next road trip </p> <a href="#">Learn More</a> 
    </div>

<div class="segundacoluna">
  <img src="images/icon-suvs.svg" alt="">
  <h1>SUVs</h1>
  <p class="paragrafo">  Take an SUV for its spacious <br> interior, power, and <br> versatility. Perfect for your <br> next family vacation 
    and <br> off-road adventures.</p>
    <a href="#">Learn More</a>


</div>


<div class="terceiracoluna">
  <img src="images/icon-luxury.svg" alt="">
  <h1>Luxury</h1>
  <p class="paragrafo">  Cruise in the best car brands <br> without the bloated prices. <br> Enjoy the enhanced comfort <br> of a luxury
    rental and arrive <br> in style.</p>
    <a href="#">Learn More</a>
</div>

<div class="learnmore">
</div>
    0
  • Michał Sujkowski•70
    @MichalSujkowskiSubmitted about 2 years ago

    I need help centering the crossed out price against the promotional price

    Product cart

    2
    Tyrone Robertson•230
    @RoneeeyPosted about 2 years ago

    @MichalSujkowski, @half-cto has provided the exact solution I would of suggested. But being advised what you should do doesn't necessarily translate into you understanding the solution and being able to apply it under different circumstances.

    Check out this video about flexboxes. It really helped me grasp flexbox. Traversy Media (the guy who made the video) also has one on grids. I highly recommend learning that as well for layout and alignment.

    https://www.youtube.com/watch?v=3YW65K6LcIA&ab_channel=TraversyMedia

    1