Reveal cropped portions of content while post is under mouse pointer.
As of
/* ==UserStyle==
@name Twitter.com: un-trim images on hover
@description Reveal cropped portions of content while post is under mouse pointer.
@namespace myfonj
@version 1.0.3
@license CC0 - Public Domain
==/UserStyle== */
@-moz-document domain("twitter.com") {
/*
Twitter.com: un-trim images on hover
div[aria-label^="Timeline: "] > div > div > div
= "post item"
*/
/*
let the spice flow. over.
*/
div[aria-label^="Timeline: "] > div > div > div:hover,
div[aria-label^="Timeline: "] > div > div > div:hover * {
overflow: visible !important;
z-index: 10;
}
/*
directly hovered position something always above its unhovered siblings
*/
div[aria-label^="Timeline: "] > div > div:hover *:hover {
z-index: 20;
}
/*
counters covered by box would be inaccessible, move them above and make 'em transparent ...
*/
div[aria-label^="Timeline: "] > div > div > div:hover [role="group"],
div[aria-label^="Timeline: "] > div > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"] {
z-index: 30;
opacity: 0;
}
div[aria-label^="Timeline: "] > div > div > div:hover [role="group"] {
outline: 20px solid rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.5);
}
/*
... until hovered
*/
div[aria-label^="Timeline: "] > div > div > div:hover [role="group"]:hover,
div[aria-label^="Timeline: "] > div > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"]:hover {
opacity: 1 !important;
}
div[aria-label^="Timeline: "] > div > div > div [style^="flex-basis"] + div [dir][lang]:hover,
div[aria-label^="Timeline: "] > div > div > div [style^="flex-basis"]:hover + div [dir][lang] {
z-index: 30;
background-color: rgba(0, 0, 0, 0.5);
border-left: 10px solid transparent;
margin-left: -10px;
}
/*
this is it - this *invisible* image just sits there covering div with very same image as background,
"squeezed" into wrapper. so let's unleash it while invisible to gain some performace
*/
div[aria-label^="Timeline: "] > div > div > div [aria-label] > img {
width: auto !important;
height: auto !important;
max-width: calc(100vw - 20em) !important;
/* too lazy to measure sidebar for now */
min-width: calc(100%) !important;
/* sometimes there is small pic that would otherwise downscale */
outline: 3px solid black;
z-index: 100 !important;
}
/*
tadaa, real pic an all its glory. most probably bigger
*/
div[aria-label^="Timeline: "] > div > div > div:hover [aria-label] > img {
opacity: 1 !important;
}
div[aria-label^="Timeline: "] > div > div > div:hover [aria-label] > img:hover {
box-shadow: rgba(217, 217, 217, 0.2) 0px 0px 10px, rgba(217, 217, 217, 0.25) 0px 3px 6px 3px;
}
/*
video player controls
*/
div[aria-label^="Timeline: "] > div > div > div:hover [style^="style=\"transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity:"],
div[aria-label^="Timeline: "] > div > div > div:hover [style*="position: absolute;"]
{
z-index: 30;
}
/*
style="transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity: 1;"
*/
/*
Increase size of avatar pictures in hover popup
this is hell to debug, so please dont't judge
the popup has bottom/top according relative placement in viewport
*/
[style*="left: "] a[role="link"][tabindex="-1"][aria-hidden="true"],
[style*="left: "] a[role="link"][tabindex="-1"][aria-hidden="true"] * {
min-height: 12em !important;
min-width: 12em !important;
margin: 0 !important;
padding: 0 !important;
background-size: contain;
}
/* WIP show alt */
/*
[aria-haspopup="false"][href*="/status/"] [aria-label]:not(img):not([aria-label="Image"]) {
outline: 10px solid red !important;
xtransform: scale(1);
}
*[aria-haspopup="false"][href*="/status/"] [aria-label]:not(img):not([aria-label="Image"])::after {
content: attr(aria-label) !important;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}
*/
}