Using FlexBox and transition for the overlay

Community feedback

• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  Hey, if you give your .image--container div a role="header" and your .author--section div a role="contentinfo" you will fix your accessibility issues. :)

  Marked as helpful

  1
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Tony, I saw your work and also tested the design responsiveness. I noticed some issues that I think can be matter of an hour to solve your issues and they're as following:

  1. Your Equillibrium image of card is not positioned center properly and I think you need to fix it, as I checked your code then I found you hadn't apply the CSS property particularly for main image. So I would suggest you just add some CSS for the main image and it will then make your card more better.

  2. While checking your above issue code then I also saw that you left alt attribute empty and that's why your report generated by FEM have 2 issues. So give some alt text and generate new report and see your result.

  I hope you understand and soon will fix the issues.

  Good Luck

  Marked as helpful

  0

  ---

  

  tony1610•410

  @tony1610Posted almost 3 years ago

  @skyv26 Great catch about the ALT text. I have updated all image ALT text, although the errors did't went away, is best practice to always use the ALT text on all images. As I am looking more into this errors, I believe that is asking for using a more semantic tag approach, ie, header, nav, footer, main, and so on. Which I think is not necessary for this design.

  For the main image, I bump the max-height (not a big fan of using height on images) for the container and that took cared centering the image and that actually match the original design.

  Thanks for the response, and let me know what you think about it.

  0
• 

  Dusvy_M•390

  @dovelmPosted almost 3 years ago

  Don't use - - , use only one - example: container-one

  0