Design comparison
Solution retrospective
modified the active state but it doesnt work for the main image..
Community feedback
- @riverCodesPosted over 2 years ago
So for the active states, here's what you need to do.
-
wrap your <img> tag in a <a> tag. This is what should link to the content page when the user clicks on it.
-
position: relative;
on the <img>. Then, use pseudo elements img::before and img::after.position: absolute;
on both of them. this will create two children of the <img> which will be lifted up from the flow of the document and will be positioned relative to your <img> -
The ::before will be the color. Set
content: "";
(empty string), and top: 0, left: 0, width: 100%, height: 100%. set the color of your choice. -
the ::after will be the eye. Set
content: "url(eye-icon-here)";
and position it to the center similarly. -
Set hover states on the pseudo elements. For example, img:hover::before and img:hover::after. In the hover pseudo elements, apply
opacity: 1;
. In img::before and img::after, applyopacity: 0;
. This will make it so that when the user hovers on the pseudo elements, the styles appear and when not hovered, nothing happens. -
You can make the transition smoother by applying
transition: opacity .5s ease;
to the ::before and ::after elements. -
Additionally, change your div.attribution to footer.attribution. That will solve the last accessibility issue you have.
Hope this helps!
Marked as helpful0@neuyannPosted over 2 years ago@riverCodes Thanks again.
I uploaded the code but the pic active state doesnt work...
0 -
- @riverCodesPosted over 2 years ago
Hi, congrats on completing the challenge. The content inside the card looks great! I just commented on someone else's solution of the same challenge, and i notice similar issues in yours as well so I'm going to carry my feedback over to here.
- For the HTML and Accessibility issues,
-put alt attributes on your images and icons. -Change your div.cardBG to main.cardBG (<main class="cardBG">). -Whenever you use a section, it needs to have one heading element inside it, and the whole page needs to have at least one <h1> tag.
- You haven't implemented the active states yet. I don't know if it's because you missed it on the design references and you know how to achieve it, or if its because you don't know how to achieve it. If you want help with this I can help you out further.
Besides that, I think the rest is good! Keep learning!
Marked as helpful0@neuyannPosted over 2 years ago@riverCodes thanks for your feedback. I really apreciate that.
I updated the code, but i cant find how to change the main image to the active state (eye + color). any help? :)
1
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