Brandon• 40
@Lun0xxx
Submitted
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
Tyrone Robertson
@Roneeey
All comments
- Tyrone Robertson• 230
@Roneeey
Posted
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
@Lun0xxx
Submitted
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
Tyrone Robertson• 230@Roneeey
Posted
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 - Yago Guedes• 130
@guedesyc
Submitted
I can't put it as responsive, the backgrounds are crooked with less than 400px. help is welcome! :)
Tyrone Robertson• 230@Roneeey
Posted
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
@MichalSujkowski
Submitted
I need help centering the crossed out price against the promotional price
Tyrone Robertson• 230@Roneeey
Posted
@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
