Image zoom: click + hold to expand images

Share & showcase
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!!

21

It’s not working in version 0.13.14

22

Updated the snippet in the OP for Live Preview. You can also use Minimal Theme which includes the snippet bundled in, and is kept up to date for new versions of Obsidian.

2 Likes
23

It’s working. Thanks for your update @kepano. Is there a way that I could put the image outside the pane and create it as a lightbox image?

24

Is there a way to modify CSS so it doesn’t require the mouse be held down? (Click to zoom in, next click closes the image). Similar to the way it works with mobile.

3 Likes
25

Hey there ! thanks to OP for the topic which helped but I had the same problem as HowBizzare

found a “simple” fix

That may be less “beautiful” but works for me (as in I don’t close the image on click)

I simply put that in the CSS :

.view-content img:hover {
transform: scale(1.25);
}

It is enough for me you can put the ratio you want, hope it can help other newbies like me !

26

I’m using the latest version of obsidian + minimal theme and settings.
Is there a way to disable imagezoom globaly but enable it per note?
I’d like to use it where i have cssclasses imagegrid but not with single embeds.

Thanks in advance.

27

@kepano Thanks for the css snippet.

I adapted to css to limit the zoom to 100% of the image size.

/* Image zoom  */
/* Credits: kepano, https://forum.obsidian.md/t/image-zoom-click-hold-to-expand-images/5164 */
/* Changes: Limit zoom to 100% of image size */
/* Todo: Zoom on Bigger Images should be reduced to meet viewport size */


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

/* --------------- */