Make an image full screen on click

Anki Card Design
1

Hi there! I would like help to find a way to display images full screen on click, and close the full screen preview when clicking again, just like in this snippet: javascript - How do I make an image full screen on click? - Stack Overflow

I know basic html/css/js, but need help to learn how to do it :slight_smile:

If you know about an addon that already does that, please let me know! I couldn’t find one…

2

I tried discussing it briefly with ChatGPT, but did not come up with a satisfying solution.

Howevert, if your purpose is to just zoom images, maybe you could try a CSS-only solution.

E.g. this code allows you to zoom-in an image after clicking on it. The image remains zoomed as long as you do not move the cursor away from it.

html:not(.mobile) img:hover {
  cursor: zoom-in;
  transition: .5s;
  transition-delay: 90s; /* how long before the img automatically returns to original size */
  transition-property: -webkit-transform;
  -webkit-transform: scale(1); 
  z-index: 999; 
  position: sticky; /* this and z-index should ensure that the zoomed img is always displayed on top of any other element */
}

html:not(.mobile) img:active { 
 cursor: zoom-out;
 -overflow: auto; /* Enable scroll if needed */
 transition: 0s;
 transition-delay: 0.05s;
 transition-property: -webkit-transform;
 -webkit-transform: scale(2.5); /* set zoom level */
 -webkit-transform-origin: 0% 0%; /* set img position */
 z-index: 1000; 
}
3

Thanks, that’s not really what I want, I would prefer some sort of “popup” like in the example because otherwise it is restricted by several other area from Anki

But that is a good first draft! I will use that for now and modify it a little bit.

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.