HTML && CSS

Community feedback

• 

  riverCodes•300

  @riverCodesPosted over 2 years ago

  Hey! good job on the overall design, you've pretty much nailed it. There are a couple of issues with your HTML and Accessibility though. Here's what you can do to fix those:

  • Change your container div to a <main> element. The main content of your page should always be contained within a <main> element as it provides a landmark feature to screen readers, letting them jump to the main content of the page quickly.
  • Add alt attributes to your images. Text should describe the image, unless the image is purely decoration.
  • Using article tags on this card is not necessary. If you do use them, it's best to have a heading element included within. So ask yourself, do I have a heading element, and if I do, then I should use the article/section elements.
  • Change the h2 to h1 element.

  As for implementing the hover aspect, the way you have done it is fine, but the most important thing is wrapping your overlay element in a <a> tag, as it is an interactive element that is supposed to take you to another page.

  A cleaner way of implementing the hover would also be to use pseudo elements like ::before and ::after on the image container div.

  • The before child should have the translucent teal color and the after child should contain the view icon. You can use bg-image properties to center the icon.
  • The before and after children should be positioned absolutely on the relatively positioned container div. These elements should also have a content of empty string, like content: "";
  • Then, animate the hovers as you have already done.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Bingerminn•240

  @yallsobadPosted over 2 years ago

  @riverCodes Thank you!!

  1