Meta Post - Common CSS Hacks

[kepano]

Here’s a new tidbit I am using:

Image zoom: click + hold to expand images

Here’s what it looks like: The code. Note, you can also remove the background or change it to a semi-translucent color. .view-content img { max-width:100%; cursor:zoom-in;} .view-content img:active { cursor:zoom-out; } .view-content .markdown-preview-view img[referrerpolicy='no-referrer']:active, .view-content .image-embed:active { background:var(--background-primary); cursor:zoom-out; display:block; z-index:200; position:fixed; max-height:100%; max-width:100%;…

Here’s what it looks like:

The code. Note, you can also remove the background or change it to a semi-translucent color.

.markdown-preview-view .internal-embed img {
	cursor:zoom-in;}

.markdown-preview-view .internal-embed img:active {
	cursor:zoom-out;
	display:block;
	z-index:100;
	position:fixed;
    max-height:100%;
    max-width:100%;
    height:100%;
    width:100%;
    object-fit: contain;
    margin:0 auto;
    text-align:center;
    top: 50%;
  	transform: translateY(-50%);
    padding:0;
    left:0;
    right:0;
    bottom:0;
    background:var(--background-primary);}