twitter alt text shower.css

/* Defaults */
div[data-testid="tweetPhoto"]:after{
    color: #fff;
    margin: 0;
    padding: 1rem;
    text-align: center;
    transition: color 0.1s ease-in, background 0.3s ease-in; 
}

div[data-testid="tweetPhoto"]:hover:after{
    color: rgba(0, 0, 0, 0) !important;
    background: rgba(0, 0, 0, 0) !important;
}

/* Image with no alt text */
div[data-testid="tweetPhoto"][aria-label="Image"]:after {
    content: "No alt text";
    background: rgba(50, 0, 0, .75);
}

/* Show alt text in a pseudo element */
div[data-testid="tweetPhoto"]:not([aria-label="Image"]):after {
    content: attr(aria-label);
    background-color: rgba(0, 0, 0, .75);
}

/* GIF alt text, only works if GIF auto play is off. Shouldn't add on to videos because changing the alt text on a video is impossible (currently).
* Also disappears once the GIF is played. */
div[data-testid="previewInterstitial"]:not([aria-label="Embedded video"]):after {
    content: attr(aria-label);
    background-color: rgba(0, 0, 0, .75);
    color: #fff;
    margin: 0;
    padding: 0.75rem;
}

/*
* In your manifest.json (for browsers that support the WebExtension API) fill out the required fields.
* Add `"offline_enabled": false`.
* Add a content script to your `content_scripts` that has the properties `"css": {{path to this css file}}`, `"run_at": "document_idle"` and `"matches":["https://*.twitter.com/*"]`.
* Load an unpacked extension at chrome://extensions/
*/