Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@khiga8
Copy link
Owner

@khiga8 khiga8 commented Feb 16, 2022

Fixes #12

Context

Previously the text overlay was styled to appear over the image. This resulted in text covering the image. Another problem was that when there were multiple images on the same line, the captions for each image will overlap on top of each other.

Instead, we have the text overlay appear below the image and a border outlining the image and overlay to group it together. Additionally, we ensure that the alt text overlay is added when image is nested inside table and other elements, not just <p>.

This also turns off the extension outside of the github.com and gist.github.com domain where support may be wonky.

Screenshots

Before:

screenshot of three images appearing horizontally inline. the text overlay for each image overlaps on top of each other making it unreadable

screenshot of text overlay missing  when image is nested inside a table cell

After:

screenshot of text overlay appearing below each of the three images without overlapping on each other or the image

screenshot of text overlay appearing over each image nested inside a table cell

opacity: 0.6;
width: 100%;
font-size: 0.8rem;
opacity: 0.8;
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes font size smaller. Also, sets opacity to 0.8 because 0.6 is too low color contrast.

@khiga8 khiga8 marked this pull request as draft February 16, 2022 06:13
@khiga8 khiga8 marked this pull request as ready for review February 16, 2022 15:56
@khiga8 khiga8 merged commit 884b0d4 into main Feb 16, 2022
@khiga8 khiga8 deleted the kh-fix-alt-overlay-issue branch February 16, 2022 15:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

When there is alt text on a smaller image such as an emoji, the overlay text takes up the whole page

1 participant