Design comparison
Solution retrospective
I could not for the life of me figure out how to apply the active effect on the image. Can anyone please explain how can I do it correctly? I did it using after and before pseudo-elements, but I don't think this is the correct way to do it. In a real-world scenario, someone would wanna click on the image and that would take them to another link, so I was thinking; would a better approach be to use an icon inside of an anchor tag, and somehow put it on top of the image, and give it a background color of that one in the challenge? I'm not sure if this is even a possible solution. This challenge frustrated me. Any help is appreciated. I also didn't have time to add a readme file, but I will add it later.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Mohieb, great job here first of all, and I think the component looks pretty close to the design!
About your question, you can simply wrap the
a
tag around the image div. It's good that you considered how this would all be implemented in a real-world scenario, and I think there could be various possibilities, like it could be a link that brings the user to the next page, as you said, or it could bring up a pop-up info box. In any case, for the situation you wanted, this is something you can try, which also involves making the cube image as animg
and not as a background image:HTML: <a href="#"> <div class="image"> ::before <img src="image-equilibrium.jpg" alt="Equilibrium NFT"> ::after </div> </a> CSS: .image { // remove height // remove background-image } .image img { width: 100%; height: 100%; border-radius: 10px; }
After that, you should be able to hover over the cube and see both the overlay and the link. And yes, whenever there's an image that's central to the content, you'd always want to try to use
img
and not a background image. Hope this helps a bit, and happy coding!Marked as helpful1@dev-mohiebPosted over 2 years ago@elaineleung Thank you so much! I will test and try this method out.
1 - @PhoenixDev22Posted over 2 years ago
Hello Mohieb,
Congratulation on completing this challenge.
Excellent work! I see you have received some incredible feedback how to do the hover effect on the equilibrium image. I have few more suggestions regarding your solution, if you don't mind:
HTML
- The link wrapping the equilibrium image should either have
Sr-only
text, anaria-label
oralt
text that says where that link takes you.
- For any decorative images, each img tag should have empty
alt=""
and addaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images in( icon-ethereum, icon-clock ).
- Profile images like that avatar are valuable content. The alternate text of the avatar’s image should not be
avatar
, it’s meaningless. You can use the creator's nameJules Wyvern
. Read more how to write an alt text
- If you wish to draw a horizontal line, you should do so using appropriate CSS. You may remove the
<div class=”line”>
, you can useborder-top:
to the avatar's part.
- Adding
rel="noopener"
orrel="noreferrer"
totarget="_blank"
links. When you link to a page on another site usingtarget=”_blank”
attribute , you can expose your site to performance and security issues.
Hopefully this feedback helps. Happy coding!
Marked as helpful0@dev-mohiebPosted over 2 years ago@PhoenixDev22 Thank you so much! Can you explain a little more on the last point about security? I'm not sure I understood the correlation between everything.
1 - The link wrapping the equilibrium image should either have
- @PhoenixDev22Posted over 2 years ago
Hi Mohieb,
Glad to help.
All three terms (noopener, noreferrer) are values of the rel attribute of the anchor tag in HTML and rel (rel coming from RELationship). target attribute with the _blank value instructs the web browser to open this link in a new tab. And this is the main reason why values like noopener and noreferrer are used. When you are using target=" _blank" value, something interesting happens. The page you are linking to gets partial access to the linking page. It does so through the window.opener object.
Then, the linking page can use window.opener.location to open the malicious website. you can read more in mdn and Point Jupiter article in here
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