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.

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

.markdown-preview-view 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);}
34 Likes

Works. Great! Thanks!

1 Like

Works very well! Thanks a lot.

Super helpful. Using Obsidian to present images in an art history class and this is exactly the functionality I was hoping to figure out.

2 Likes

Very useful! It should be default piece of CSS code in Obsidian!

3 Likes

Excllent work, thank you for sharing this!

1 Like

Just one simple question:

where should I put these code, in the obsidian.css?

1 Like

Yep! In obsidian.css

where do I put this code? Sorry, I don’t know programming.

I added this as CSS snippet, and it works great. One question though: when I click and hold the button down it will zoom in. When I let go the button, it will zoom out. Is there a way to zoom in on a click (button down then up) and zoom out requiring another ciick on the picture? That would allow to move the mouse around more easily when zoomed-in (especially with a trackpad).

1 Like

Not with pure CSS, that I know of. This would require a plugin or a change to Obsidian itself.

Thank you for this snippet.
But is there a way to expand the image to full screen rather than be limited to the size of the pane?
My use case is that if i open many pane or use sliding pane (andy mode), the pane will be smaller, so it imposed a constraints on the zoom function.

This is gold! Thanks a lot!

This is super helpful, thank you so much! But I was wondering, is it possible to make it so you wouldn’t have to hold down the mouse button in order to keep the image large? Clicking once to keep the image expanded would be more convenient for me. Don’t know much about coding to do it myself.:frowning:

Hey @kepano ,
Good work with the click to zoom.

This cool new new tweak for inverting images Auto-adaptive images [for dark / light theme] breaks this click to zoom tweak. Any possible solution ?

Loving the minimal theme, thank you.

I solved my problem while making this post, so I’ll share:

How to make thumbnails (that do not expand when resizing windows, and do not affect the zoom size.)


Use the snippet provided by OP, and add separately:

.markdown-preview-view .image-embed  {
max-width: 250px;
}

If you just use this snippet by itself, it will effect zoom size.