Hi
There’s quite a bit to learn from this. most important of all is it’s essential for hover effects to be on interactive elements. Hovers indicate interactivity but you have no anchor tags at all on this. Essential to fix.
Other pointers:
- use min height 100vh never height. Your solution is cut off on mobile landscape screens because of that
- use a css reset at the start of your style sheet and that will iron out visual inconsistencies across browsers. If you inspect in devtools look at the computed properties panel and you’ll see what browsers are applying to the hr. Probably background color, border and height.
- a reset will usually set img tag to be display block and max width 100% which would be helpful to you on this. Then no need to size the image.
- there’s no need to have a height on the card. The height can be auto calculated by the browser depending on the contents inside.
- for the image hover, first it should be wrapped in an anchor tag as already stated. The alt text should be the link destination. I would add the hover effect using pseudo elements as there’s no need for them to be in the html. But if you want to have the eye image in html, it’s alt text would need to be left blank so it is ignored by assistive tech
Hope this helps
Marked as helpful
1
