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.4
@license CC0 - Public Domain
==/UserStyle== */
@-moz-document domain("twitter.com") {
/*
Twitter.com: un-trim images on hover
https://greasyfork.org/en/scripts/402913/versions/new
https://userstyles.org/styles/175427/edit
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;
}
/* 2020-06 - avatars in timeline started to follow same principle, so became hover "jumpy"
since we are zooming them in detail popups anyway, just be dirty and brutal for now
N.B. beautiful selector for picking avatar "cell": [style="flex-basis: 49px;"]
*/
div[aria-label^="Timeline: "]:not(#\0) [style="flex-basis: 49px;"] img {
display: none;
outline: 1px solid red;
}
/*
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;
}
*/
}