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);}
18 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.

1 Like

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.