Click an image and see it in large size

Help
1

I would like to be able to click an image in preview to see it in full size. Some times charts and infographics are too small to read otherwise.

4 Likes
2

How about this:

/* Enlarge image on hover */
.markdown-preview-view img {
    display: block;
    margin-top: 20pt;
    margin-bottom: 20pt;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    /* experiment with values */
    transition: transform 0.25s ease;
}

.markdown-preview-view img:hover {
    -webkit-transform: scale(1.8);
    /* experiment with values */
    transform: scale(2);

}
1 Like
3

Would I put this in the CSS file or how would one incorporate that?

4

If you haven’t done so, open settings, and under “Appearence”, check “Custom CSS”. Then, create a file called obsidian.css in your note directory, and paste this in. It should work then. However, if you use a theme, the file may be overwritten. In that case, you may have to add it back in.

1 Like
5

Thank you, appreciate the assistance

1 Like
6

I know this thread is ages old but I came back to it looking to figure out why my embeds no longer shrunk and hover no longer worked. Updating the CSS to this fixed the issue:

Cheers, Time Travellers!


.markdown-source-view img, .markdown-source-view video {
    width: auto;
    height: auto;
    object-fit: contain;
    max-height: 450px;
    max-width: 825px;
    outline: 0px solid var(--text-accent);
  }
  .markdown-source-view img:hover , .markdown-source-view video:hover {
    width: 100%;
    height:100%;
    max-width: min(100%, 80vw);
    max-height: min(100%, 80vh);
    outline: none;
    cursor: zoom-in;
  }
7

hello, thezetner.

I hope you are doing great!

is this still working for you? i just downloaded obsidian for the first time and tried to do this but it wont work.

Thanks a lot!

edit: for some reason it works for the newly inserted images. This is good enough for me. Thanks!

1 Like