@heyitsgany
Posted
This looks good, you've gotten pretty close to the design, nice work!
A couple of things to look at:
- Your active state on the image (the colour overlay and eye icon) is a little larger than the image itself, so you get an odd extra bit at the bottom of the image when you hover.
- You want to change the attribution div to a footer element instead (just to keep it semantically correct).
- The height of the card could be increased slightly to better match the design.
Also, the solution report is stating that you need to include a h1 element, although looking at your markup I can see it's there. I'm not sure if making it aria-hidden has caused this issue?
Marked as helpful
@Sloth247
Posted
@heyitsgany Hi Jason, thanks for your feedback! I have fixed the pointers other than first one - I cannot find the solution, so I will ask in #help of the community. h1 element had to be .sr-only
- screen reader only text, so I fixed.
@heyitsgany
Posted
@Sloth247 so, to solve the problem with the overlay having the extra space at the bottom; make sure you give your img element a display: block.
It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.
Marked as helpful
@Sloth247
Posted
@heyitsgany Wow, that fixed!! Thank you very much and I keep in mind it in the future 👩🦰