Image zoom: click + hold to expand images

Share & showcase
1

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%;
  height:100%;
  width:100%;
  object-fit:contain;
  margin:0 auto;
  text-align:center;
  padding:0;
  left:0;
  right:0;
  bottom:0;
}
.view-content .image-embed:active img {
  top:50%;
  transform:translateY(-50%);
  padding:0;
  margin:0 auto;
  width:100%;
  max-height:100vh;
  object-fit:contain;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  opacity:1;
}
42 Likes
2

Works. Great! Thanks!

1 Like
3

Works very well! Thanks a lot.

4

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

3 Likes
5

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

3 Likes
6

Excllent work, thank you for sharing this!

1 Like
7

Just one simple question:

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

1 Like
8

Yep! In obsidian.css

9

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

10

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
11

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

12

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.

1 Like
13

This is gold! Thanks a lot!

14

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:

15

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 ?

16

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.

1 Like
17

Thanks for the your code. This is really handy and helpful.

18

Thank you! Absolutly great feature!

19

For those who do not where to add the code, as explained here, in the VAULT folder if you create one called snippets, and create a file with any name and .css extension it will be detected in Settings → Appearance → CSS snippets. An example:

image
image1570×854 142 KB

Thanks for the simple yet great funcionality!

2 Likes
20

works perfectly
I was getting frustrated due to the impossibility of zooming on images

Your css saved my sanity, thanks!!