Design comparison
Solution retrospective
I unfortunately was unable to complete this challenge exactly perfectly (the eye svg activated when hovered) and would greatly appreciate feedback on my code and how others who have tried this managed to make it happen with plain CSS
Community feedback
- @asmaa-elfatayryPosted about 2 years ago
Hi, Roman
you do a great job to make the eye SVG when you hover you simply can make a div and put the SVG image or icon give the style with position or any style you want and finally make the div display none and when hover the display will be block
I will leave you some sources I hope the sources will clarify for you more:
https://www.geeksforgeeks.org/how-to-create-image-overlay-hover-using-html-css/
https://tutorialdeep.com/knowhow/create-image-hover-overlay-effect-css/#:~:text=The%20short%20answer%20is%3A%20use%20the%20CSS%20property,Create%20Image%20Hover%20Overlay%20Effect%20Transparent%20Using%20CSS
0 - @VCaramesPosted about 2 years ago
Hey @r0mankeys, some suggestions to improve you code:
- Here is a link that will teach you how to apply the overlay effect:
https://www.w3schools.com/howto/howto_css_image_overlay.asp
- To give you HTML code structure, you want to set up your code in the following manner (only did parent containers):
<body> <main> <article></article> </main> </body>
The Main Element identifies the main content of the document.
While the Article Element will serve as the card’s container, because the card represents a complete, or self-contained, section of content that is, in principle, independently reusable.
More info:
https://web.dev/learn/html/headings-and-sections/
-
The NFT Alt Tag description needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
The Section Element is being used incorrectly and not needed for this challenge; a simple Div will do.
-
Wrap the "NFT image", "Equilibrium #3429" and "Jules Wyvern" in an Anchor Tags <a>. The anchor tag will allow users to click on content and have them directed to another part of your site.
Happy Coding! 👻🎃
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