NFT Preview card - Using CSS3's Grid & Flex
Design comparison
Solution retrospective
Hello everyone..👨💻
- This was an excellent challenge to train and improve my knowledge with grid & flex layout.
- This helps me to practice about turning designs into actual website
- I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!
Feel free to leave comments on how I can improve my code.
Peace be upon you..✨
Community feedback
- @ima9ghPosted 3 months ago
Hi please help me.
What is the problem with my code, why doesn't it work? Although the opacity on hover is 1!
The eye is the icon on the photo when hovering
.NTF .eye{ position: absolute; background-image: url(images/icon-view.svg) no-repeat center; background-color: var(--clrBGeye); width: 290px; height: 290px; display: flex; justify-content: center; align-items: center; top: 130px; border-radius: 5px; opacity: 0; } .NTF .eye :hover{ opacity: 1; }
: I haven't uploaded the challenge yet.
1@0xabdulkhaliqPosted 3 months agoThanks for reaching out @ima9gh 👋,
There's a typo issue on css that's it, You can't set
opacity: 1
for.eye
element in it's normal state (which means eye is still not hovered) and can't leave space between Pseudo-classes and.eye
class (element that needs to be targeted)Additionally, You can spice up your NFT Component with Fade-In Transition by adding, So here's an Example,
.eye { transition: opacity .4s ease; opacity: 0; } .eye:hover{ opacity: 1; }
PS: I don't know why you're selecting
.eye
with.NFT
class, You don't need to chain multiple classes (descendant ofNFT
, BTW I still don't know how you structured your HTML.)1@ima9ghPosted 3 months ago@0xabdulkhaliq
Thank you for taking the time. opacity: 1; It was a mistake, I didn't mean it 😅
The main div is with class NFT.
I thought I should mention that the eye is inside the NFT.
Today I am uploading my challenge, refer to my code to see the html structure.
0 - @HassiaiPosted almost 2 years ago
Increase the width of .container to get the desire width in the design. for mor responsive width use max-width instead of width. There is no need for height value in .container the padding value is sufficient.
Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more css units this watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful
Well done for completing this challenge,
1@0xabdulkhaliqPosted almost 2 years agoDear @Hassiai,
- The link you shared was very usefull to understand
- Thanks for your feedback regarding this solution
0@HassiaiPosted almost 2 years ago@0xAbdulKhalid, if you find my comment helpful mark it as helpful
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord