Skip to content

show twitter alt text by notafile

Screenshot of show twitter alt text

Details

Authornotafile

LicenseNo License

Categorytwitter

Created

Updated

Size994 B

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

show twitter images' alt text on hover

Notes

Source code

/* ==UserStyle==
@name         show twitter alt text
@version      20211008.12.20
@namespace    userstyles.world/user/notafile
@description  show twitter images' alt text on hover
@author       notafile
@license      No License
==/UserStyle== */

@-moz-document domain("twitter.com") {
/** This snippet adds an overlay to images on Twitter, so the alt text
  * (if there is any) is shown at the top of an image.
  */
div[data-testid="tweetPhoto"]:not([aria-label="Image"]),
div[data-testid="previewInterstitial"]:not([aria-label="Embedded video"]) {
    margin: 0 !important;
}

/** If you want to see alt text all the time, remove :hover from these two rules */
div[data-testid="tweetPhoto"]:hover:not([aria-label="Image"]):after,
div[data-testid="previewInterstitial"]:hover:not([aria-label="Embedded video"]):after {
    content: attr(aria-label);
    background: rgba(0, 0, 0, .75);
    color: #fff;
    padding: 10px;
    font-family: sans-serif;
    line-height: 130%;
    z-index: 1;
}
}

Reviews

No reviews yet.