Image zoom: click + hold to expand images

Share & showcase
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;
}

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