Card with an image with hover in HTML & CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  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

  ---

  

  Roy•195

  @royschrauwenPosted almost 3 years ago

  @grace-snow Thank you so much for taking the time give advice! I also really appreciate you don't just tell me what is wrong or could be improved, but also letting me know why that is an issue. It really helps in the learning process!

  0
• 

  Jordan•70

  @Ciph-rPosted almost 3 years ago

  Hello,

  Your card looks really good. I ran into the same issue with the view icon not being fully white. From what I've read the issue seems to be related to how opacity effects child elements. There might be a better fix but for mine I ended up setting the background to the cyan color with alpha instead of using opacity. So just "background: hsla(178, 100%, 50%, 0.5);" and then the icon shows up clearly.

  Hope that helps!

  Marked as helpful

  1

  ---

  

  Roy•195

  @royschrauwenPosted almost 3 years ago

  @JordanHunt3r That is a great tip, I will try it out! Thank you very much for your feedback!

  0