Twitter.com: un-trim images on hover

twitter-com-un-trim-images-on-hover.user.css

@-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: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:hover [role="group"],
div[aria-label^="Timeline: "] > 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:hover [role="group"]:hover,
div[aria-label^="Timeline: "] > div > div:hover [role="link"][data-focusable="true"][href$="/media_tags"]:hover {
	opacity: 1 !important;
}


div[aria-label^="Timeline: "] > div > div [style^="flex-basis"] + div [dir][lang]:hover,
div[aria-label^="Timeline: "] > 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 [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:hover [aria-label] > img {
	opacity: 1 !important;
}
div[aria-label^="Timeline: "] > 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:hover [style^="style=\"transition-duration: 250ms; transition-property: opacity, height; transition-timing-function: ease; will-change: opacity; opacity:"],
div[aria-label^="Timeline: "] > 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-haspopup="false"],
[style*="left: "] a[role="link"][tabindex="-1"][aria-haspopup="false"] * {
	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;
}
*/
}